html {
font-size: 14px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 0px;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
color: var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
text-align: start;
}
:root {
--app-blue: #075bbb;
--app-blue-2: #0b6fe8;
--app-orange: #ff8a3d;
--app-yellow: #ffc928;
--app-bg: #f4f8fd;
--app-text: #0f172a;
--app-muted: #64748b;
--app-border: #dbe7f4;
}
html, body {
min-height: 100%;
overflow-x: hidden;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
color: var(--app-text);
background: var(--app-bg);
}
/* Login */
.auth-body {
overflow: hidden;
}
.auth-page {
min-height: 100vh;
display: grid;
place-items: center;
padding: 32px 16px;
background: radial-gradient(circle at 0% 0%, rgba(7, 91, 187, .18) 0, rgba(7, 91, 187, .10) 18%, transparent 36%), radial-gradient(circle at 100% 100%, rgba(255, 138, 61, .22) 0, rgba(255, 138, 61, .12) 20%, transparent 42%), linear-gradient(135deg, #f7fbff 0%, #ffffff 45%, #fff7ef 100%);
}
.auth-card {
width: min(470px, 100%);
border: 2px solid var(--app-orange);
border-radius: 18px;
background: rgba(255, 255, 255, .92);
box-shadow: 0 22px 70px rgba(15, 23, 42, .14);
padding: 34px 38px;
}
.auth-logo {
width: 210px;
height: 78px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
border-radius: 16px;
background: #fff;
box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
font-weight: 800;
}
.brand-coop {
color: #0674c9;
font-size: 20px;
}
.brand-smile {
color: #ff5b22;
font-style: italic;
font-size: 20px;
}
.brand-cheers {
color: #0b57aa;
background: #ffd64d;
border-radius: 999px;
padding: 2px 8px;
font-size: 13px;
margin-left: 6px;
}
.auth-card h1 {
text-align: center;
color: #075bbb;
font-size: 25px;
font-weight: 900;
margin: 0 0 8px;
letter-spacing: 0;
}
.auth-subtitle {
text-align: center;
color: var(--app-muted);
margin-bottom: 18px;
}
.auth-input .input-group-text {
width: 48px;
justify-content: center;
background: #f8fbff;
color: #3065a8;
border-color: #c8d8ee;
}
.auth-input .form-control {
height: 48px;
border-color: #c8d8ee;
}
.auth-input .form-control:focus {
border-color: var(--app-blue-2);
box-shadow: 0 0 0 .2rem rgba(11, 111, 232, .12);
}
.auth-submit {
height: 48px;
border: 0;
border-radius: 8px;
color: #fff;
font-weight: 800;
background: linear-gradient(90deg, #1475e8, #075bbb);
box-shadow: 0 12px 22px rgba(7, 91, 187, .24);
}
.auth-note {
margin-top: 24px;
display: flex;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border: 1px solid #ffd078;
border-radius: 10px;
background: #fff7df;
color: #7a5314;
font-size: 14px;
}
/* App layout */
.app-shell {
min-height: 100vh;
display: grid;
grid-template-columns: 246px 1fr;
background: #f3f7fc;
}
.app-sidebar {
background: #fff;
border-right: 1px solid var(--app-border);
padding: 20px 14px;
}
.app-sidebar-brand {
height: 54px;
display: flex;
align-items: center;
gap: 10px;
color: var(--app-blue);
font-weight: 900;
}
.app-nav {
margin-top: 22px;
display: grid;
gap: 8px;
}
.app-nav a {
display: flex;
align-items: center;
gap: 12px;
min-height: 50px;
padding: 0 14px;
border-radius: 10px;
color: #475569;
font-weight: 700;
text-decoration: none;
}
.app-nav a.active,
.app-nav a:hover {
background: #eaf3ff;
color: var(--app-blue);
}
.app-main {
min-width: 0;
}
.app-topbar {
height: 74px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 28px;
background: linear-gradient(90deg, #075bbb, #0b6fe8);
color: #fff;
box-shadow: 0 8px 20px rgba(7, 91, 187, .18);
}
.app-content {
padding: 28px 34px;
}
.app-card {
background: #fff;
border: 1px solid var(--app-border);
border-radius: 14px;
box-shadow: 0 12px 26px rgba(15, 23, 42, .06);
}
/* Global loading */
.app-loading {
position: fixed;
inset: 0;
z-index: 2000;
display: none;
align-items: center;
justify-content: center;
background: rgba(9, 24, 49, .82);
backdrop-filter: blur(3px);
}
.app-loading.show {
display: flex;
}
.app-loading-box {
text-align: center;
color: #fff;
font-weight: 800;
}
.app-spinner {
width: 72px;
height: 72px;
margin: 0 auto 18px;
border-radius: 50%;
border: 7px solid rgba(255, 255, 255, .22);
border-top-color: var(--app-yellow);
border-right-color: #18a2ff;
animation: appSpin .85s linear infinite;
}
.app-loading-small {
margin-top: 8px;
color: #ffc928;
font-size: 14px;
}
@keyframes appSpin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 900px) {
.app-shell {
grid-template-columns: 1fr;
}
.app-sidebar {
display: none;
}
.app-content {
padding: 20px 16px;
}
}
:root {
--app-primary: #0756B8;
--app-primary-dark: #06469A;
--app-primary-light: #EAF3FF;
--app-orange: #F58A00;
--app-yellow: #FFC928;
--app-bg: #F4F7FB;
--app-text: #172033;
--app-muted: #667085;
--app-border: #E2E8F0;
--app-shadow: 0 8px 28px rgba(15, 38, 74, .07);
}
body {
background: var(--app-bg);
color: var(--app-text);
font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}
/* Login */
/* Login background - hotfix */
.login-page {
position: relative;
overflow: hidden;
background: radial-gradient(900px 420px at 0% 0%, rgba(56, 152, 255, .22) 0%, rgba(56, 152, 255, 0) 62%), radial-gradient(920px 460px at 100% 100%, rgba(255, 145, 35, .20) 0%, rgba(255, 145, 35, 0) 64%), linear-gradient(150deg, #063a86 0%, #0a4ea7 48%, #0e63bc 100%);
}
.login-page::before,
.login-page::after {
content: "";
position: absolute;
pointer-events: none;
z-index: 0;
border-radius: 999px;
filter: blur(1px);
box-sizing: border-box;
}
.login-page::before {
width: 420px;
height: 190px;
left: -150px;
top: -72px;
background: linear-gradient(130deg, rgba(83, 176, 255, .34) 0%, rgba(28, 112, 222, .20) 56%, rgba(255, 150, 44, .28) 100%);
transform: rotate(-15deg);
opacity: .78;
}
.login-page::after {
width: 500px;
height: 220px;
right: -180px;
bottom: -96px;
background: linear-gradient(135deg, rgba(44, 164, 255, .22) 0%, rgba(41, 164, 92, .22) 52%, rgba(255, 138, 24, .30) 100%);
transform: rotate(-12deg);
opacity: .82;
}
.login-decoration {
position: absolute;
pointer-events: none;
z-index: 0;
}
.login-decoration-top {
width: 520px;
height: 170px;
top: -36px;
left: -210px;
border-radius: 999px;
background: linear-gradient(140deg, rgba(70, 170, 255, .22), rgba(255, 153, 51, .18) 62%, transparent 100%);
transform: rotate(-12deg);
opacity: .78;
}
.login-decoration-bottom {
width: 560px;
height: 190px;
right: -220px;
bottom: -60px;
border-radius: 999px;
background: linear-gradient(140deg, rgba(44, 164, 255, .18), rgba(53, 182, 90, .20) 52%, rgba(255, 138, 24, .22) 100%);
transform: rotate(-14deg);
opacity: .82;
}
/* Remove old animation causing transform override */
@media (max-width: 576px) {
.login-page::before {
width: 280px;
height: 130px;
left: -110px;
top: -50px;
}
.login-page::after {
width: 300px;
height: 150px;
right: -120px;
bottom: -70px;
}
.login-decoration-top,
.login-decoration-bottom {
opacity: .62;
}
}
/* [MỚI] Viền LED cam của form đăng nhập - sáng đậm rồi mờ dần, lặp lại,
cùng kiểu hiệu ứng với Toast thông báo và trang Hướng dẫn sử dụng. */
@keyframes loginLedGlowOrange {
0%, 100% {
border-color: rgba(245, 138, 0, .45);
box-shadow: 0 22px 60px rgba(24, 58, 105, .14), 0 0 8px rgba(245, 138, 0, .22);
}
50% {
border-color: rgba(245, 138, 0, 1);
box-shadow: 0 22px 60px rgba(24, 58, 105, .14), 0 0 32px 6px rgba(245, 138, 0, .70);
}
}
.login-card {
position: relative;
z-index: 2;
width: min(100%, 470px);
padding: 34px 38px;
background: rgba(255, 255, 255, .96);
border: 2px solid rgba(245, 138, 0, .72);
border-radius: 22px;
box-shadow: 0 22px 60px rgba(24, 58, 105, .14);
animation: loginLedGlowOrange 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.login-card {
animation: none;
}
}
.login-logo-wrap {
width: 210px;
height: 78px;
border-radius: 18px;
background: #fff;
padding: 10px 18px;
box-shadow: 0 8px 24px rgba(7, 86, 184, .12);
}
.login-logo-wrap img,
.header-logo-wrap img {
width: 100%;
height: 100%;
object-fit: contain;
}
.login-title {
color: var(--app-primary);
font-size: 1.42rem;
font-weight: 800;
letter-spacing: .02em;
}
.login-subtitle {
margin-top: 7px;
color: var(--app-muted);
font-size: .95rem;
}
/* [MỚI - không có trong GAS] Icon badge dùng cho các màn hình xác thực dùng chung
khung .login-card (ví dụ màn hình bắt buộc đổi mật khẩu), tham khảo phong cách
.must-change-icon bên GAS (Phân ca). */
.login-icon-badge {
display: grid;
place-items: center;
width: 56px;
height: 56px;
border-radius: 16px;
background: var(--app-primary-light);
color: var(--app-primary);
font-size: 1.6rem;
}
.app-input-group .input-group-text,
.app-input-group .form-control,
.password-toggle {
min-height: 48px;
border-color: #C9D5E5;
}
.app-input-group .input-group-text {
background: #fff;
color: #64748B;
}
.app-input-group .form-control:focus {
border-color: #6FA7E8;
box-shadow: 0 0 0 .22rem rgba(7, 86, 184, .10);
}
.password-toggle {
border-left: 0;
background: #fff;
color: #64748B;
}
.app-btn-primary {
background: linear-gradient(135deg, #0B67D8 0%, #0756B8 100%);
border: 0;
color: #fff;
min-height: 46px;
font-weight: 700;
border-radius: 9px;
box-shadow: 0 8px 18px rgba(7, 86, 184, .20);
}
.app-btn-primary:hover {
color: #fff;
background: linear-gradient(135deg, #0756B8 0%, #06469A 100%);
}
.login-security {
display: flex;
align-items: flex-start;
gap: 6px;
padding: 12px 14px;
border-radius: 9px;
background: #FFF8DF;
border: 1px solid #F6DF8A;
color: #765C00;
font-size: .82rem;
}
/* App layout */
.app-header {
position: sticky;
top: 0;
z-index: 1040;
height: 74px;
color: #fff;
background: linear-gradient(100deg, #064AA2 0%, #0756B8 60%, #0A63C9 100%);
box-shadow: 0 3px 16px rgba(0, 46, 112, .18);
}
.header-inner {
height: 74px;
}
.app-brand {
display: inline-flex;
align-items: center;
gap: 12px;
color: #fff;
text-decoration: none;
}
.app-brand:hover {
color: #fff;
}
.header-logo-wrap {
width: 150px;
height: 46px;
flex: 0 0 150px;
border-radius: 9px;
background: #fff;
padding: 6px 12px;
box-shadow: 0 2px 10px rgba(0,0,0,.13);
}
.app-brand-title {
font-size: 1.12rem;
font-weight: 750;
white-space: nowrap;
}
.header-user {
line-height: 1.25;
}
.header-user-role {
margin-top: 3px;
font-size: .78rem;
color: rgba(255,255,255,.78);
}
.header-divider {
width: 1px;
height: 34px;
background: rgba(255,255,255,.32);
}
.header-icon-btn {
width: 39px;
height: 39px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
border: 1px solid rgba(255,255,255,.32);
border-radius: 9px;
}
.header-icon-btn:hover {
color: #fff;
background: rgba(255,255,255,.12);
}
/* ============================================================
[MỚI] Chuông thông báo (badge đỏ + bảng thả xuống) + Toast
chủ động viền cam sáng đèn LED. Xem notifications.js.
============================================================ */
.notif-wrap {
position: relative;
}
.notif-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 999px;
background: #dc3545;
color: #fff;
font-size: 11px;
font-weight: 800;
line-height: 18px;
text-align: center;
box-shadow: 0 0 0 2px var(--app-primary-dark);
}
.notif-panel {
position: fixed;
z-index: 25000;
right: 18px;
top: 68px;
width: min(420px, calc(100vw - 24px));
max-height: min(520px, calc(100vh - 100px));
display: flex;
flex-direction: column;
background: #fff;
border-radius: 14px;
box-shadow: 0 18px 48px rgba(15, 38, 74, .22);
border: 1px solid var(--app-border);
overflow: hidden;
}
.notif-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
font-weight: 800;
color: var(--app-text);
border-bottom: 1px solid var(--app-border);
background: var(--app-primary-light);
}
.notif-panel-body {
overflow-y: auto;
padding: 6px;
}
.notif-empty {
padding: 24px 12px;
text-align: center;
color: var(--app-muted);
font-size: 14px;
}
.notif-item {
display: flex;
align-items: flex-start;
gap: 10px;
width: 100%;
text-align: left;
padding: 10px;
border: 0;
border-radius: 10px;
background: transparent;
cursor: pointer;
}
.notif-item:hover {
background: var(--app-primary-light);
}
.notif-item-icon {
flex: 0 0 auto;
width: 32px;
height: 32px;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--app-primary-light);
color: var(--app-primary);
}
.notif-item-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.notif-item-title {
font-weight: 700;
color: var(--app-text);
font-size: 14px;
}
.notif-item-meta {
font-size: 12px;
color: var(--app-muted);
}
.notif-item-message {
font-size: 13px;
color: var(--app-text);
white-space: normal;
word-break: break-word;
}
/* ---- Toast chủ động, viền cam sáng đèn LED ---- */
.notif-toast-host {
position: fixed;
z-index: 26000;
right: 18px;
bottom: 18px;
display: flex;
flex-direction: column;
gap: 10px;
width: min(360px, calc(100vw - 24px));
}
@keyframes notifLedGlow {
0%, 100% {
box-shadow: 0 0 0 0 rgba(245, 138, 0, .55), 0 10px 26px rgba(15, 38, 74, .20);
}
50% {
box-shadow: 0 0 16px 4px rgba(245, 138, 0, .60), 0 10px 26px rgba(15, 38, 74, .20);
}
}
.notif-toast {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
background: #fff;
border: 2px solid var(--app-orange);
border-radius: 12px;
animation: notifLedGlow 1.6s ease-in-out infinite;
cursor: pointer;
opacity: 1;
transform: translateY(0);
transition: opacity .3s ease, transform .3s ease;
}
.notif-toast-hide {
opacity: 0;
transform: translateY(8px);
}
.notif-toast-icon {
flex: 0 0 auto;
width: 32px;
height: 32px;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #FFF2E0;
color: var(--app-orange);
}
.notif-toast-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1 1 auto;
}
.notif-toast-title {
font-weight: 800;
font-size: 13px;
color: var(--app-text);
}
.notif-toast-summary {
font-size: 12px;
color: var(--app-muted);
}
.notif-toast-close {
flex: 0 0 auto;
border: 0;
background: transparent;
color: var(--app-muted);
font-size: 18px;
line-height: 1;
cursor: pointer;
}
.app-btn-logout {
min-height: 39px;
color: #fff;
background: var(--app-yellow);
border: 0;
color: #7A4E00;
font-weight: 800;
border-radius: 9px;
padding-inline: 18px;
}
.app-shell {
display: grid;
grid-template-columns: 246px 1fr;
min-height: calc(100vh - 74px);
}
.app-sidebar {
background: #fff;
border-right: 1px solid var(--app-border);
}
.sidebar-content {
min-height: calc(100vh - 74px);
display: flex;
flex-direction: column;
padding: 22px 10px 16px;
}
.app-nav-link {
display: flex;
align-items: center;
gap: 13px;
min-height: 50px;
padding: 0 14px;
border-radius: 10px;
color: #4B5565;
font-weight: 700;
text-decoration: none;
}
.app-nav-link i {
font-size: 1.05rem;
}
.app-nav-link.active,
.app-nav-link:hover {
background: var(--app-primary-light);
color: var(--app-primary);
}
.sidebar-support {
padding-top: 18px;
}
.support-card {
padding: 16px;
border-radius: 12px;
background: #FFF7DF;
border: 1px solid #F6DF8A;
}
.support-icon {
width: 34px;
height: 34px;
display: grid;
place-items: center;
color: var(--app-orange);
background: #fff;
border-radius: 9px;
margin-bottom: 10px;
}
.app-content {
min-width: 0;
padding: 30px 34px;
}
/* Global loading */
.global-loading {
position: fixed;
inset: 0;
z-index: 3000;
display: none;
align-items: center;
justify-content: center;
background: rgba(10, 25, 49, .86);
backdrop-filter: blur(4px);
}
.global-loading.show {
display: flex;
}
.global-loading-box {
text-align: center;
color: #fff;
}
.global-spinner {
width: 74px;
height: 74px;
margin: 0 auto 18px;
border-radius: 50%;
border: 7px solid rgba(255,255,255,.20);
border-top-color: var(--app-yellow);
border-right-color: #20A7FF;
animation: appSpin .8s linear infinite;
}
.global-loading-title {
font-weight: 800;
font-size: 1rem;
}
.global-loading-subtitle {
margin-top: 8px;
color: var(--app-yellow);
font-size: .9rem;
font-weight: 700;
}
@keyframes appSpin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 992px) {
.app-shell {
grid-template-columns: 1fr;
}
.app-sidebar {
display: none;
}
.app-content {
padding: 22px 16px;
}
.app-brand-title {
display: none;
}
}
:root {
--app-orange-strong: #e85d04;
}
/* Top tabbar: viền cam đậm ở đáy */
.app-header {
position: sticky;
top: 0;
z-index: 1040;
overflow: hidden;
}
.app-header::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #ff8a00 0%, var(--app-orange-strong) 100%);
}
/* Nới rộng sidebar để text menu 1 hàng */
.app-shell {
grid-template-columns: 300px 1fr;
}
.app-sidebar {
width: 300px;
min-width: 300px;
}
.app-nav-link {
min-height: 54px;
padding: 0 16px;
}
.app-nav-link span {
white-space: nowrap;
line-height: 1.25;
}
/* Active + hover: pha xanh + viền cam */
.app-nav-link.active,
.app-nav-link:hover {
color: #0756B8;
background: linear-gradient(90deg, rgba(7, 86, 184, .16) 0%, rgba(7, 86, 184, .06) 100%);
border: 1px solid rgba(232, 93, 4, .78);
box-shadow: inset 4px 0 0 #0756B8, 0 8px 16px rgba(7, 86, 184, .10);
}
/* Mobile offcanvas sidebar */
.mobile-sidebar .offcanvas-header {
background: linear-gradient(100deg, #064AA2 0%, #0756B8 60%, #0A63C9 100%);
color: #fff;
border-bottom: 3px solid #ff8a00;
}
.mobile-sidebar .offcanvas-title {
color: #fff;
}
.mobile-sidebar .btn-close {
filter: invert(1);
}
/* Responsive */
@media (max-width: 992px) {
.app-shell {
grid-template-columns: 1fr;
}
.app-sidebar {
display: none;
}
.mobile-menu-toggle {
display: inline-flex !important;
align-items: center;
justify-content: center;
}
.app-content {
padding: 18px 12px;
}
.app-brand-title {
display: inline-block;
max-width: 42vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@media (max-width: 576px) {
.app-header,
.header-inner {
height: 64px;
}
.header-logo-wrap {
width: 118px;
height: 38px;
flex: 0 0 118px;
padding: 5px 9px;
}
.app-btn-logout {
min-height: 34px;
padding-inline: 10px;
font-size: .88rem;
}
}
/* ===== Bottom bar giống GAS ===== */
.app-frame {
min-height: calc(100vh - 74px);
display: flex;
flex-direction: column;
}
.app-shell {
flex: 1 1 auto;
min-height: 0;
}
.app-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
padding: 15px 34px;
background: #fff;
border-top: 1px solid var(--app-border);
color: #7b8798;
font-size: .78rem;
}
@media (max-width: 992px) {
.app-frame {
min-height: calc(100vh - 74px);
}
.app-footer {
padding: 14px 20px;
}
}
@media (max-width: 576px) {
.app-frame {
min-height: calc(100vh - 66px);
}
.app-footer {
align-items: flex-start;
flex-direction: column;
padding: 14px;
gap: 8px;
}
}
.login-page {
min-height: 100dvh;
}
.login-page .container {
min-height: 100dvh;
align-items: center !important;
justify-content: center !important;
}
@media (max-width: 576px) {
.login-page .container {
min-height: 100dvh;
max-width: 100%;
padding-left: 14px;
padding-right: 14px;
}
.login-card {
width: calc(100vw - 28px);
max-width: 410px;
margin: 0 auto;
padding: 26px 18px;
border-radius: 18px;
}
.login-logo-wrap {
width: min(180px, 62vw);
height: 72px;
}
.login-title {
font-size: 1.45rem;
}
.login-subtitle {
font-size: .95rem;
}
}
.app-input-group .input-group-text,
.app-input-group .form-control,
.password-toggle {
min-height: 50px;
}
.app-btn-primary {
min-height: 50px;
font-size: 1rem;
}
@media (max-width: 576px) {
.app-header {
overflow: visible;
}
.header-inner {
gap: 6px;
}
.app-brand {
min-width: 0;
gap: 6px;
flex: 1 1 auto;
}
.header-logo-wrap {
width: 96px;
height: 34px;
flex: 0 0 96px;
padding: 4px 8px;
}
.app-brand-title {
display: inline-block;
max-width: 34vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .86rem;
}
.header-actions {
margin-left: auto;
flex-shrink: 0;
gap: 6px !important;
}
.header-icon-btn {
width: 34px;
height: 34px;
padding: 0;
border-radius: 8px;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
#changePasswordBtn {
display: inline-flex !important;
}
#notificationBtn {
display: inline-flex !important;
}
.app-btn-logout {
min-height: 34px;
min-width: 40px;
padding: 0 10px;
border-radius: 8px;
white-space: nowrap;
font-size: .84rem;
}
}
/* Máy rất hẹp: ưu tiên nút chức năng hơn title */
@media (max-width: 430px) {
.app-brand-title {
display: none;
}
}
.page-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 18px;
}
.page-title {
margin: 0;
font-size: 2rem;
font-weight: 800;
color: #1b2438;
letter-spacing: .01em;
}
.page-subtitle {
margin: 4px 0 0;
color: #5c6c84;
font-size: 1rem;
}
.page-meta {
display: flex;
align-items: center;
gap: 10px;
color: #71809a;
font-size: .84rem;
white-space: nowrap;
}
.app-btn-outline {
border: 1px solid #94b7ec;
color: #1b5fbf;
background: #fff;
font-weight: 700;
}
.app-btn-outline:hover {
color: #0f4ca0;
border-color: #5f96e0;
background: #eef5ff;
}
.stat-card {
position: relative;
overflow: hidden;
border: 1px solid #e3ebf6;
border-radius: 14px;
background: #fff;
padding: 18px 16px 16px;
box-shadow: 0 10px 22px rgba(15, 39, 78, .06);
}
.stat-card::after {
content: "";
position: absolute;
top: -22px;
right: -22px;
width: 68px;
height: 68px;
border-radius: 50%;
opacity: .22;
}
.stat-blue::after {
background: #5fa8ff;
}
.stat-orange::after {
background: #ffa347;
}
.stat-yellow::after {
background: #ffd44f;
}
.stat-green::after {
background: #7eddb0;
}
.stat-icon {
width: 38px;
height: 38px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
margin-bottom: 10px;
color: #0e57b3;
background: #eaf3ff;
}
.stat-orange .stat-icon {
color: #d96a00;
background: #fff1e3;
}
.stat-yellow .stat-icon {
color: #b88400;
background: #fff7da;
}
.stat-green .stat-icon {
color: #1a8f5d;
background: #e8faef;
}
.stat-label {
color: #60728e;
font-weight: 700;
font-size: .95rem;
margin-bottom: 2px;
}
.stat-value {
font-size: 2rem;
line-height: 1;
font-weight: 850;
color: #1a2740;
margin: 4px 0 6px;
}
.stat-note {
color: #90a0b8;
font-size: .8rem;
font-weight: 600;
}
.app-card {
border: 1px solid #e1eaf6;
border-radius: 14px;
background: #fff;
box-shadow: 0 12px 28px rgba(15, 38, 74, .06);
}
.app-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 16px 16px 14px;
border-bottom: 1px solid #e8eef7;
}
.app-card-title {
margin: 0;
font-size: 1.2rem;
font-weight: 800;
color: #1c2a44;
}
.app-card-subtitle {
margin-top: 4px;
color: #74839a;
font-size: .88rem;
}
.app-table th {
border: 0;
background: #1058b8;
color: #fff;
font-size: .82rem;
font-weight: 800;
letter-spacing: .01em;
padding: 11px 14px;
text-transform: uppercase;
}
.app-table td {
padding: 11px 14px;
vertical-align: middle;
border-color: #edf2fa;
color: #1f2a3d;
}
.hr-dashboard-mini-card {
border-top: 2px solid #f58a00;
}
@media (max-width: 992px) {
.page-heading {
flex-direction: column;
align-items: flex-start;
}
.page-meta {
width: 100%;
justify-content: space-between;
}
}
@media (max-width: 576px) {
.page-title {
font-size: 1.6rem;
}
.page-subtitle {
font-size: .92rem;
}
.stat-value {
font-size: 1.7rem;
}
.app-card-title {
font-size: 1.03rem;
}
.app-card-subtitle {
font-size: .82rem;
}
.app-table th,
.app-table td {
padding: 10px 11px;
font-size: .85rem;
}
}
/* [MỚI] Modal đổi mật khẩu - giao diện desktop (trước đây chỉ có style cho mobile,
modal hiển thị mặc định của Bootstrap nên trông sơ sài). Tái sử dụng lại
.app-input-group/.password-toggle/.app-btn-primary đã dùng ở trang Đăng nhập để
đảm bảo đồng bộ giao diện toàn ứng dụng. */
#changePasswordModal .modal-content {
border: 0;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 24px 60px rgba(15, 38, 74, .22);
}
#changePasswordModal .modal-header {
align-items: center;
padding: 20px 24px;
border-bottom: 0;
background: linear-gradient(135deg, #0B67D8 0%, #0756B8 100%);
color: #fff;
}
#changePasswordModal .modal-header .modal-title {
display: flex;
align-items: center;
gap: 12px;
font-weight: 800;
font-size: 1.12rem;
}
#changePasswordModal .modal-header .change-password-icon-badge {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 12px;
background: rgba(255, 255, 255, .18);
font-size: 1.15rem;
}
#changePasswordModal .modal-header .btn-close {
filter: brightness(0) invert(1);
opacity: .85;
}
#changePasswordModal .modal-header .btn-close:hover {
opacity: 1;
}
#changePasswordModal .modal-body {
padding: 26px 26px 10px;
}
#changePasswordModal .form-label {
color: #344054;
}
#changePasswordModal .modal-footer {
padding: 16px 26px 22px;
border-top: 1px solid #EEF2F6;
}
#changePasswordModal .modal-footer .btn {
min-height: 44px;
border-radius: 9px;
font-weight: 700;
}
/* Change password modal - mobile safe */
@media (max-width: 576px) {
#changePasswordModal .modal-dialog {
margin: 0.6rem auto;
max-width: calc(100vw - 0.8rem);
}
#changePasswordModal .modal-content {
max-height: calc(100dvh - 1.2rem);
border-radius: 14px;
overflow: hidden;
}
#changePasswordModal .modal-header {
padding: 12px 14px;
}
#changePasswordModal .modal-title {
font-size: 1.05rem;
}
#changePasswordModal .modal-body {
padding: 12px 14px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
#changePasswordModal .form-label {
font-size: 0.94rem;
margin-bottom: 0.32rem;
}
#changePasswordModal .form-control {
min-height: 44px;
font-size: 1rem;
}
#changePasswordModal .modal-footer {
padding: 10px 14px 12px;
gap: 8px;
}
#changePasswordModal .modal-footer .btn {
flex: 1 1 0;
min-height: 40px;
white-space: nowrap;
}
}
@media (max-width: 390px) {
#changePasswordModal .modal-dialog {
margin: 0.5rem auto;
max-width: calc(100vw - 0.6rem);
}
#changePasswordModal .modal-title {
font-size: 1rem;
}
}
/* ===== Sidebar Theme V2: Thick Stripe 3D ===== */
.app-sidebar {
position: relative;
overflow: hidden;
background: radial-gradient(120% 70% at 10% -10%, rgba(110, 182, 255, .28), transparent 55%), radial-gradient(90% 60% at 100% 110%, rgba(255, 145, 32, .22), transparent 58%), linear-gradient(180deg, #0a4ea7 0%, #0b63bc 52%, #0a55af 100%);
border-right: 1px solid rgba(255, 255, 255, .16);
}
.app-sidebar::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: repeating-linear-gradient( 90deg, rgba(255,255,255,.20) 0 2px, rgba(0,0,0,.12) 2px 4px, rgba(255,255,255,.05) 4px 18px );
opacity: .5;
mix-blend-mode: screen;
}
.app-sidebar::after {
content: "";
position: absolute;
left: -35%;
bottom: -18%;
width: 130%;
height: 42%;
pointer-events: none;
background: linear-gradient(110deg, rgba(63, 176, 255, .28), rgba(63, 176, 255, 0) 58%), linear-gradient(110deg, rgba(255, 151, 41, .20), rgba(255, 151, 41, 0) 62%);
transform: rotate(-7deg);
}
.sidebar-content {
position: relative;
z-index: 1;
}
.app-nav-link {
color: #edf5ff;
border: 1px solid transparent;
background: rgba(255, 255, 255, .04);
transition: .2s ease;
}
.app-nav-link i {
color: #c2ddff;
transition: .2s ease;
}
.app-nav-link span {
color: #eef6ff;
font-weight: 750;
}
.app-nav-link:hover {
border-color: rgba(255, 158, 62, .8);
background: linear-gradient(95deg, rgba(255,255,255,.2), rgba(255,255,255,.07));
box-shadow: inset 4px 0 0 #6ab4ff, 0 10px 20px rgba(6, 37, 92, .3);
transform: translateY(-1px);
}
.app-nav-link:hover i,
.app-nav-link:hover span {
color: #fff;
}
/* Active glow orange */
.app-nav-link.active {
border-color: rgba(255, 142, 25, .95);
background: linear-gradient(95deg, rgba(117, 192, 255, .22), rgba(255,255,255,.08));
box-shadow: inset 4px 0 0 #fff, 0 0 0 1px rgba(255, 173, 82, .2), 0 0 12px rgba(255, 146, 40, .5), 0 0 24px rgba(255, 146, 40, .32);
}
.app-nav-link.active i,
.app-nav-link.active span {
color: #ffd58a;
text-shadow: 0 0 8px rgba(255, 180, 80, .75), 0 0 18px rgba(255, 150, 46, .5);
}
/* Keep support card harmonious */
.support-card {
background: linear-gradient(145deg, rgba(255, 246, 220, .97), rgba(255, 236, 186, .96));
border: 1px solid rgba(245, 191, 98, .85);
box-shadow: 0 10px 20px rgba(7, 39, 95, .26);
}
/* ===== V2 fix for mobile offcanvas menu ===== */
@media (max-width: 992px) {
.mobile-sidebar .offcanvas-header {
background: radial-gradient(120% 70% at 10% -10%, rgba(110, 182, 255, .24), transparent 55%), linear-gradient(180deg, #0a4ea7 0%, #0b63bc 52%, #0a55af 100%);
border-bottom: 3px solid #ff8f2a;
}
.mobile-sidebar .offcanvas-title {
color: #f3f8ff;
text-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}
.mobile-sidebar .offcanvas-body {
position: relative;
background: radial-gradient(90% 55% at 100% 110%, rgba(255, 145, 32, .18), transparent 58%), linear-gradient(180deg, #0a4ea7 0%, #0b63bc 52%, #0a55af 100%) !important;
overflow: hidden;
}
.mobile-sidebar .offcanvas-body::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: repeating-linear-gradient( 90deg, rgba(255,255,255,.18) 0 2px, rgba(0,0,0,.10) 2px 4px, rgba(255,255,255,.04) 4px 18px );
opacity: .42;
mix-blend-mode: screen;
}
.mobile-sidebar .offcanvas-body nav {
position: relative;
z-index: 1;
}
.mobile-sidebar .app-nav-link {
color: #eef6ff !important;
border: 1px solid transparent;
background: rgba(255, 255, 255, .05);
}
.mobile-sidebar .app-nav-link i,
.mobile-sidebar .app-nav-link span {
color: #eaf3ff !important;
text-shadow: none;
}
.mobile-sidebar .app-nav-link:hover {
border-color: rgba(255, 158, 62, .82);
background: linear-gradient(95deg, rgba(255,255,255,.20), rgba(255,255,255,.07));
box-shadow: inset 4px 0 0 #6ab4ff, 0 10px 20px rgba(6, 37, 92, .30);
}
.mobile-sidebar .app-nav-link.active {
border-color: rgba(255, 142, 25, .95);
background: linear-gradient(95deg, rgba(117, 192, 255, .24), rgba(255,255,255,.10));
box-shadow: inset 4px 0 0 #ffffff, 0 0 0 1px rgba(255, 173, 82, .20), 0 0 12px rgba(255, 146, 40, .50), 0 0 24px rgba(255, 146, 40, .32);
}
.mobile-sidebar .app-nav-link.active i,
.mobile-sidebar .app-nav-link.active span {
color: #ffd58a !important;
text-shadow: 0 0 8px rgba(255, 180, 80, .75), 0 0 18px rgba(255, 150, 46, .50);
}
}
.ot-stepper {
display: flex;
align-items: center;
gap: .75rem;
padding: 1rem 1.25rem;
overflow-x: auto;
}
.ot-step {
display: flex;
align-items: center;
gap: .5rem;
flex: 0 0 auto;
color: #64748b;
font-size: .95rem;
white-space: nowrap;
font-weight: 700;
}
.ot-step span {
width: 32px;
height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #cbd5e1;
background: #fff;
font-weight: 800;
}
.ot-step.active {
color: #0756b8;
}
.ot-step.active span {
color: #fff;
background: #0756b8;
border-color: #0756b8;
}
.ot-step.done span {
color: #fff;
background: #16a34a;
border-color: #16a34a;
}
.ot-step-line {
height: 1px;
min-width: 28px;
flex: 1 1 auto;
background: #dbe5f1;
}
.ot-review-box {
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 14px;
background: #f8fbff;
}
.ot-review-item {
border: 1px solid #e5edf8;
border-radius: 10px;
padding: 10px 12px;
background: #fff;
height: 100%;
}
.ot-review-label {
color: #64748b;
font-size: .82rem;
font-weight: 700;
margin-bottom: 4px;
}
.ot-review-value {
color: #1f2a44;
font-size: .95rem;
font-weight: 700;
word-break: break-word;
}
@media (max-width: 576px) {
.ot-stepper {
padding: .8rem .9rem;
}
.ot-step strong {
font-size: .86rem;
}
.ot-step-line {
min-width: 16px;
}
}
.employee-work-card {
border: 1px solid #e5e7eb;
border-radius: 14px;
background: #fff;
overflow: hidden;
}
.employee-work-card-header {
background: #f8fafc;
border-bottom: 1px solid #e5e7eb;
}
.employee-work-entry {
border: 1px solid #edf0f2;
border-radius: 12px;
padding: 12px;
background: #fff;
margin-bottom: 10px;
}
.employee-work-entry:last-child {
margin-bottom: 0;
}
/* ===== Overtime Wizard Timeline - Theme C (Orange Neon Pro) ===== */
.ot-stepper {
position: relative;
display: flex;
align-items: center;
gap: 0.9rem;
padding: 1rem 1.25rem;
border: 2px solid #ff7a00;
border-radius: 16px;
background: radial-gradient(110% 120% at 5% -10%, rgba(255, 140, 40, 0.22), rgba(255, 255, 255, 0) 48%), linear-gradient(180deg, #fffaf4 0%, #fff 100%);
box-shadow: 0 10px 24px rgba(255, 122, 0, 0.16), inset 0 0 0 1px rgba(255, 171, 92, 0.28);
overflow-x: auto;
}
.ot-step {
display: flex;
align-items: center;
gap: 0.55rem;
flex: 0 0 auto;
color: #5f6f87;
font-size: 0.96rem;
font-weight: 800;
white-space: nowrap;
}
.ot-step span {
width: 34px;
height: 34px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #ffb56c;
background: linear-gradient(180deg, #fff4e6 0%, #ffe5c8 100%);
color: #d05a00;
font-weight: 900;
transition: all .2s ease;
}
.ot-step strong {
letter-spacing: .01em;
}
.ot-step-line {
height: 3px;
min-width: 34px;
flex: 1 1 auto;
border-radius: 999px;
background: linear-gradient(90deg, #ffd9b3 0%, #ffedda 100%);
}
/* Active: bright neon orange */
.ot-step.active {
color: #9f4200;
}
.ot-step.active span {
color: #fff;
border-color: #ff7a00;
background: linear-gradient(180deg, #ffab4d 0%, #ff7a00 55%, #f15f00 100%);
box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.22), 0 0 20px rgba(255, 122, 0, 0.62), 0 6px 16px rgba(205, 87, 0, 0.38);
animation: otStepNeonPulse 1.6s ease-in-out infinite;
}
/* Done: cool green balance */
.ot-step.done {
color: #146a45;
}
.ot-step.done span {
color: #fff;
border-color: #1f9d63;
background: linear-gradient(180deg, #37bf7f 0%, #1f9d63 100%);
box-shadow: 0 0 0 3px rgba(31, 157, 99, 0.16), 0 6px 14px rgba(20, 110, 71, 0.22);
}
.ot-step-line.done {
background: linear-gradient(90deg, #37bf7f 0%, #1f9d63 100%);
}
@keyframes otStepNeonPulse {
0%, 100% {
box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.2), 0 0 16px rgba(255, 122, 0, 0.48), 0 4px 12px rgba(205, 87, 0, 0.34);
}
50% {
box-shadow: 0 0 0 5px rgba(255, 122, 0, 0.28), 0 0 26px rgba(255, 122, 0, 0.72), 0 8px 20px rgba(205, 87, 0, 0.42);
}
}
@media (max-width: 768px) {
.ot-stepper {
padding: .8rem .92rem;
border-radius: 14px;
}
.ot-step {
font-size: .88rem;
}
.ot-step span {
width: 30px;
height: 30px;
font-size: .86rem;
}
.ot-step-line {
min-width: 16px;
height: 2px;
}
}
.search-picker-menu {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 6px);
z-index: 1090;
border: 1px solid #d7e3f4;
border-radius: 12px;
background: #fff;
box-shadow: 0 14px 28px rgba(15, 38, 74, .14);
overflow: hidden;
}
.search-picker-options {
max-height: 280px;
overflow-y: auto;
}
.search-picker-item {
width: 100%;
border: 0;
background: #fff;
text-align: left;
padding: 10px 12px;
color: #1f2a44;
font-weight: 600;
}
.search-picker-item:hover {
background: #f2f7ff;
color: #0756b8;
}
.search-picker-empty {
padding: 10px 12px;
color: #74839a;
font-size: .88rem;
}
/* Premium polish for request detail modal (SweetAlert2) */
.swal2-container .swal2-popup {
border: 1px solid #dbe7f4;
border-radius: 18px;
box-shadow: 0 26px 70px rgba(12, 33, 67, 0.22);
padding: 1.1rem 1.1rem 1.25rem;
}
.swal2-container .swal2-title {
font-weight: 800;
letter-spacing: 0.2px;
color: #13294b;
margin-bottom: 0.8rem;
}
.swal2-container .swal2-html-container {
margin: 0.2rem 0 0;
text-align: left;
}
/* Header info card spacing */
.swal2-container .swal2-html-container .card {
border: 1px solid #e7eef8;
border-radius: 14px;
box-shadow: 0 8px 24px rgba(16, 42, 79, 0.08);
}
.swal2-container .swal2-html-container .card .card-body {
padding: 1rem 1.05rem;
}
/* Nicer badge */
.swal2-container .swal2-html-container .badge {
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.2px;
padding: 0.42rem 0.58rem;
border-radius: 999px;
}
/* Table wrapper and sticky header */
.swal2-container .swal2-html-container .table-responsive {
border: 1px solid #e1eaf6;
border-radius: 12px;
max-height: 44vh;
overflow: auto;
background: #fff;
}
.swal2-container .swal2-html-container .table {
margin-bottom: 0;
font-size: 0.93rem;
}
.swal2-container .swal2-html-container .table thead th {
position: sticky;
top: 0;
z-index: 2;
background: linear-gradient(180deg, #f8fbff 0%, #eef4fd 100%);
color: #17345f;
font-weight: 700;
white-space: nowrap;
border-bottom: 1px solid #d8e4f4;
}
/* Better row readability */
.swal2-container .swal2-html-container .table tbody tr:nth-child(even) {
background: #fbfdff;
}
.swal2-container .swal2-html-container .table td,
.swal2-container .swal2-html-container .table th {
vertical-align: middle;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
/* Action buttons in modal */
.swal2-container .swal2-html-container .btn {
border-radius: 9px;
font-weight: 600;
}
.swal2-container .swal2-html-container .btn i {
position: relative;
top: -1px;
}
/* Mobile tune */
@media (max-width: 768px) {
.swal2-container .swal2-popup {
width: min(98vw, 98vw) !important;
padding: 0.9rem 0.8rem 1rem;
border-radius: 14px;
}
.swal2-container .swal2-title {
font-size: 1.2rem;
margin-bottom: 0.65rem;
}
.swal2-container .swal2-html-container .table {
font-size: 0.86rem;
}
.swal2-container .swal2-html-container .table-responsive {
max-height: 50vh;
}
}
/* Status badge skin - request list + detail modal */
#overtimeRequestsPage .badge,
.swal2-container .swal2-html-container .ot-status-badge {
border-radius: 999px;
font-weight: 700;
letter-spacing: 0.2px;
font-size: 0.74rem;
line-height: 1.15;
padding: 0.36rem 0.56rem;
border: 1px solid transparent;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
/* Keep list badges pretty while still using current Bootstrap classes */
#overtimeRequestsPage .badge.text-bg-secondary {
background: #64748b !important;
border-color: #5b6a80;
}
#overtimeRequestsPage .badge.text-bg-primary {
background: #1d63d6 !important;
border-color: #1a58be;
}
#overtimeRequestsPage .badge.text-bg-warning {
background: #f59e0b !important;
color: #1f2937 !important;
border-color: #dd8e09;
}
#overtimeRequestsPage .badge.text-bg-success {
background: #1f8f55 !important;
border-color: #1a7b49;
}
#overtimeRequestsPage .badge.text-bg-info {
background: #0ea5b7 !important;
border-color: #0c8f9e;
}
#overtimeRequestsPage .badge.text-bg-dark {
background: #334155 !important;
border-color: #2b3748;
}
#overtimeRequestsPage .badge.text-bg-danger {
background: #dc3545 !important;
border-color: #c12e3c;
}
/* Modal status badge classes */
.swal2-container .swal2-html-container .ot-status-badge--draft {
background: #64748b;
border-color: #5b6a80;
color: #fff;
}
.swal2-container .swal2-html-container .ot-status-badge--submitted {
background: #1d63d6;
border-color: #1a58be;
color: #fff;
}
.swal2-container .swal2-html-container .ot-status-badge--returned {
background: #f59e0b;
border-color: #dd8e09;
color: #1f2937;
box-shadow: none;
}
.swal2-container .swal2-html-container .ot-status-badge--approved {
background: #1f8f55;
border-color: #1a7b49;
color: #fff;
}
.swal2-container .swal2-html-container .ot-status-badge--published {
background: #0f766e;
border-color: #0d6660;
color: #fff;
}
.swal2-container .swal2-html-container .ot-status-badge--timesheet {
background: #0ea5b7;
border-color: #0c8f9e;
color: #fff;
}
.swal2-container .swal2-html-container .ot-status-badge--completed {
background: #334155;
border-color: #2b3748;
color: #fff;
}
.swal2-container .swal2-html-container .ot-status-badge--rejected {
background: #dc3545;
border-color: #c12e3c;
color: #fff;
}
/* Request action buttons: symmetric and evenly spaced */
#overtimeRequestsPage .request-action-group {
display: grid;
grid-template-columns: repeat(2, minmax(96px, 1fr));
gap: 6px;
min-width: 206px;
justify-items: stretch;
align-items: stretch;
}
#overtimeRequestsPage .request-action-btn {
height: 34px;
min-width: 96px;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
padding: 0 10px;
white-space: nowrap;
}
#overtimeRequestsPage td.text-end {
vertical-align: middle;
}
/* Modal action area */
.swal2-container .swal2-html-container .request-modal-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.swal2-container .swal2-html-container .request-modal-actions .request-action-btn {
min-width: 120px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
}
@media (max-width: 768px) {
#overtimeRequestsPage .request-action-group {
grid-template-columns: repeat(2, minmax(86px, 1fr));
min-width: 178px;
gap: 5px;
}
#overtimeRequestsPage .request-action-btn {
min-width: 86px;
height: 32px;
padding: 0 8px;
font-size: 0.82rem;
}
.swal2-container .swal2-html-container .request-modal-actions .request-action-btn {
min-width: 102px;
height: 34px;
font-size: 0.86rem;
}
}
/* Requests page: align table headers + symmetric action buttons */
#overtimeRequestsPage .app-table thead th {
text-align: center !important;
vertical-align: middle;
}
/* Keep action column stable and centered */
#overtimeRequestsPage .app-table th:last-child,
#overtimeRequestsPage .app-table td:last-child {
text-align: center !important;
vertical-align: middle;
}
/* Action group layout */
#overtimeRequestsPage .request-action-group {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 6px;
min-width: 210px;
}
/* Uniform button size */
#overtimeRequestsPage .request-action-btn {
min-width: 96px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
font-weight: 600;
white-space: nowrap;
border-radius: 8px;
}
/* Modal actions aligned and equal spacing */
.swal2-container .swal2-html-container .request-modal-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.swal2-container .swal2-html-container .request-modal-actions .request-action-btn {
min-width: 118px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Mobile tune */
@media (max-width: 768px) {
#overtimeRequestsPage .request-action-group {
min-width: 176px;
gap: 5px;
}
#overtimeRequestsPage .request-action-btn {
min-width: 84px;
height: 32px;
font-size: 0.82rem;
padding: 0 8px;
}
.swal2-container .swal2-html-container .request-modal-actions .request-action-btn {
min-width: 102px;
height: 34px;
font-size: 0.86rem;
}
}
.hr-quick-preview {
position: fixed;
z-index: 2100;
pointer-events: none;
}
.hr-quick-preview-card {
width: 290px;
max-width: 340px;
border: 1px solid #dbe6f6;
border-radius: 8px;
background: #fff;
box-shadow: 0 14px 32px rgba(20, 46, 86, 0.20);
padding: 10px 12px;
color: #1f2f47;
font-size: 0.92rem;
line-height: 1.35;
}
.hr-quick-preview-card {
position: relative;
width: 300px;
max-width: min(340px, calc(100vw - 24px));
border: 1px solid #ffbe7a; /* light orange edge */
border-radius: 12px;
background: #ffffff; /* keep panel clean */
box-shadow: 0 0 0 1px rgba(255, 190, 122, 0.55), 0 0 10px rgba(255, 170, 90, 0.45), 0 0 22px rgba(255, 150, 70, 0.28), 0 10px 24px rgba(35, 20, 6, 0.14);
animation: hrBorderGlow 1.8s ease-in-out infinite;
padding: 10px 12px;
font-size: 0.92rem;
line-height: 1.35;
}
.hr-quick-preview-title {
font-weight: 700;
color: #0b4ea2;
margin-bottom: 4px;
}
/* Icon action mode for request list */
#overtimeRequestsPage .request-action-group {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 6px;
min-width: auto;
}
#overtimeRequestsPage .request-action-btn.request-action-btn--icon3d {
width: 32px;
height: 32px;
min-width: 32px;
padding: 0;
border-radius: 12px;
border: 1px solid transparent;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0;
transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
box-shadow: inset 0 1px 0 rgba(255,255,255,.48), 0 4px 10px rgba(14, 29, 56, .18), 0 0 0 1px rgba(255,255,255,.06);
}
#overtimeRequestsPage .request-action-btn.request-action-btn--icon3d i {
font-size: 0.9rem;
filter: drop-shadow(0 1px 0 rgba(255,255,255,.45));
}
#overtimeRequestsPage .request-action-btn.request-action-btn--icon3d:hover {
transform: translateY(-2px);
filter: saturate(1.06);
}
#overtimeRequestsPage .request-action-btn.request-action-btn--icon3d:active {
transform: translateY(0);
box-shadow: inset 0 2px 4px rgba(0,0,0,.14), 0 2px 6px rgba(14, 29, 56, .14);
}
/* Per action tone */
#overtimeRequestsPage .request-action-btn.tone-view {
color: #fff;
border-color: #1f78e2;
background: linear-gradient(180deg, #56a6ff 0%, #1f78e2 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 4px 11px rgba(31,120,226,.35);
}
#overtimeRequestsPage .request-action-btn.tone-print {
color: #fff;
border-color: #3f69d7;
background: linear-gradient(180deg, #7ba3ff 0%, #3f69d7 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 11px rgba(63,105,215,.35);
}
#overtimeRequestsPage .request-action-btn.tone-submit {
color: #fff;
border-color: #1f8a7a;
background: linear-gradient(180deg, #42b8a3 0%, #1f8a7a 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 11px rgba(31,138,122,.33);
}
#overtimeRequestsPage .request-action-btn.tone-approve {
color: #fff;
border-color: #1f8f55;
background: linear-gradient(180deg, #3bbf79 0%, #1f8f55 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 11px rgba(31,143,85,.33);
}
#overtimeRequestsPage .request-action-btn.tone-return {
color: #5b3b00;
border-color: #e5a500;
background: linear-gradient(180deg, #ffd45e 0%, #ffb300 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 4px 11px rgba(255,179,0,.35);
}
#overtimeRequestsPage .request-action-btn.tone-reopen {
color: #6d3e00;
border-color: #ee8e22;
background: linear-gradient(180deg, #ffc072 0%, #f59a2f 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 4px 11px rgba(245,154,47,.34);
}
#overtimeRequestsPage .request-action-btn.tone-delete {
color: #fff;
border-color: #d7374d;
background: linear-gradient(180deg, #ff6b80 0%, #d7374d 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 11px rgba(215,55,77,.33);
}
/* [MOI] Nut "Sua" (chuc nang Sua ho so lam them gio) */
#overtimeRequestsPage .request-action-btn.tone-edit {
color: #fff;
border-color: #6b4fd1;
background: linear-gradient(180deg, #9c85f0 0%, #6b4fd1 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 11px rgba(107,79,209,.33);
}
.ot-action-tooltip .tooltip-inner {
background: #0f2747;
color: #fff;
border-radius: 8px;
padding: 6px 10px;
font-size: .82rem;
font-weight: 600;
}
.ot-action-tooltip.bs-tooltip-top .tooltip-arrow::before {
border-top-color: #0f2747;
}
@media (max-width: 768px) {
#overtimeRequestsPage .request-action-btn.request-action-btn--icon3d {
width: 28px;
height: 28px;
min-width: 28px;
border-radius: 10px;
}
}
#overtimeRequestsPage .badge.ot-status-badge--no-registration {
background: #eef3fb !important;
color: #4b5f7a !important;
border-color: #c9d8ee;
}
.request-summary-inline {
margin-left: auto;
font-size: .88rem;
font-weight: 700;
color: #51627e;
white-space: nowrap;
}
@media (max-width: 768px) {
.request-summary-inline {
width: 100%;
margin-top: 6px;
white-space: normal;
font-size: .84rem;
}
}
/* =========================================================================
[MỚI] Quản lý đợt làm thêm (OvertimeAdmin) - đồng bộ style bảng + icon 3D
với bảng "Danh sách hồ sơ" (#overtimeRequestsPage), và tab nổi bật kiểu
LED cam giống trạng thái active của menu trái (.app-nav-link.active).
========================================================================= */
/* ----- Tabs: chữ xanh đậm (primary), tab đang chọn sáng cam như đèn LED ----- */
#overtimeAdminPage .ot-admin-tabs {
border-bottom: 0;
gap: 10px;
row-gap: 10px;
flex-wrap: wrap;
}
#overtimeAdminPage .ot-admin-tabs .nav-link {
display: inline-flex;
align-items: center;
border: 1px solid #d7e6fb;
border-radius: 12px;
padding: 10px 22px;
font-weight: 800;
font-size: .95rem;
color: #0b4ea2;
background: #f3f8ff;
transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
#overtimeAdminPage .ot-admin-tabs .nav-link i {
color: #1058b8;
transition: color .18s ease;
}
#overtimeAdminPage .ot-admin-tabs .nav-link:hover {
border-color: #9cc4f5;
background: #e8f1ff;
color: #08386e;
transform: translateY(-1px);
}
/* Tab đang chọn: sáng cam như đèn LED - khớp .app-nav-link.active bên sidebar. */
#overtimeAdminPage .ot-admin-tabs .nav-link.active {
color: #fff;
border-color: #ff8f2a;
background: linear-gradient(135deg, #ffb454 0%, #ff8f2a 60%, #f4740a 100%);
box-shadow: 0 0 0 1px rgba(255, 173, 82, .35), 0 0 12px rgba(255, 146, 40, .55), 0 0 22px rgba(255, 146, 40, .35), 0 6px 14px rgba(180, 90, 10, .28);
text-shadow: 0 0 8px rgba(255, 214, 160, .65);
}
#overtimeAdminPage .ot-admin-tabs .nav-link.active i {
color: #fff;
}
@media (max-width: 576px) {
#overtimeAdminPage .ot-admin-tabs .nav-link {
padding: 8px 14px;
font-size: .88rem;
}
}
/* ----- Đường viền "ôm" phân định vùng nội dung của tab đang active -
sáng cam như đèn LED, bao quanh toàn bộ nội dung bên dưới hàng tab, cùng
tông màu với glow của tab đang chọn ở trên. Không nối liền với tab (chỉ
bao quanh vùng nội dung), theo đúng yêu cầu bỏ viền nối. ----- */
#overtimeAdminPage .tab-content {
position: relative;
margin-top: 14px;
padding: 18px;
border-radius: 18px;
border: 1.5px solid #ff9d3d;
background: linear-gradient(180deg, rgba(255, 180, 84, .07) 0%, rgba(255, 180, 84, 0) 90px);
box-shadow: 0 0 0 1px rgba(255, 173, 82, .28), 0 0 14px rgba(255, 146, 40, .45), 0 0 26px rgba(255, 146, 40, .22), 0 10px 22px rgba(180, 90, 10, .10);
}
@media (max-width: 576px) {
#overtimeAdminPage .tab-content {
padding: 12px;
border-radius: 14px;
}
}
/* ----- Bảng: căn giữa cột STT/trạng thái/thao tác giống bảng Hồ sơ làm thêm giờ ----- */
#overtimeAdminPage .app-table thead th {
text-align: center !important;
vertical-align: middle;
}
#overtimeAdminPage .app-table th:last-child,
#overtimeAdminPage .app-table td:last-child {
text-align: center !important;
vertical-align: middle;
}
/* ----- Icon thao tác 3D - dùng lại đúng class .request-action-btn--icon3d ----- */
#overtimeAdminPage .request-action-group {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 6px;
}
#overtimeAdminPage .request-action-btn.request-action-btn--icon3d {
width: 32px;
height: 32px;
min-width: 32px;
padding: 0;
border-radius: 12px;
border: 1px solid transparent;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0;
transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
box-shadow: inset 0 1px 0 rgba(255,255,255,.48), 0 4px 10px rgba(14, 29, 56, .18), 0 0 0 1px rgba(255,255,255,.06);
}
#overtimeAdminPage .request-action-btn.request-action-btn--icon3d i {
font-size: 0.9rem;
filter: drop-shadow(0 1px 0 rgba(255,255,255,.45));
}
#overtimeAdminPage .request-action-btn.request-action-btn--icon3d:hover {
transform: translateY(-2px);
filter: saturate(1.06);
}
#overtimeAdminPage .request-action-btn.request-action-btn--icon3d:active {
transform: translateY(0);
box-shadow: inset 0 2px 4px rgba(0,0,0,.14), 0 2px 6px rgba(14, 29, 56, .14);
}
/* Tông màu theo hành động - Sửa (tím)/Xóa (đỏ) dùng lại đúng màu bên Hồ sơ làm thêm giờ */
#overtimeAdminPage .request-action-btn.tone-edit {
color: #fff;
border-color: #6b4fd1;
background: linear-gradient(180deg, #9c85f0 0%, #6b4fd1 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 11px rgba(107,79,209,.33);
}
#overtimeAdminPage .request-action-btn.tone-delete {
color: #fff;
border-color: #d7374d;
background: linear-gradient(180deg, #ff6b80 0%, #d7374d 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 11px rgba(215,55,77,.33);
}
#overtimeAdminPage .request-action-btn.tone-approve {
color: #fff;
border-color: #1f8f55;
background: linear-gradient(180deg, #3bbf79 0%, #1f8f55 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 11px rgba(31,143,85,.33);
}
/* [MỚI] Tông "Ngừng dùng/Đóng đợt" - trung tính, không dùng lại tone-return
(màu cam của tone-return đã mang nghĩa "Trả lại hồ sơ" bên Hồ sơ làm thêm giờ). */
#overtimeAdminPage .request-action-btn.tone-deactivate {
color: #fff;
border-color: #55637a;
background: linear-gradient(180deg, #8a97ab 0%, #55637a 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 11px rgba(85,99,122,.30);
}
@media (max-width: 768px) {
#overtimeAdminPage .request-action-btn.request-action-btn--icon3d {
width: 28px;
height: 28px;
min-width: 28px;
border-radius: 10px;
}
}
/* =========================================================================
[MỚI - ADR-0006] Quản lý nhân sự (EmployeeAdmin) - áp lại đúng style LED
cam của trang Quản lý đợt làm thêm (#overtimeAdminPage) cho 3 cụm nội
dung của trang: (1) hàng tab, (2) cụm tìm kiếm/lọc nhanh, (3) cụm bảng
danh sách nhân sự. Dùng chung tông màu/khoảng sáng để đồng bộ giao diện.
========================================================================= */
/* ----- (1) Hàng tab: y hệt #overtimeAdminPage .ot-admin-tabs, chữ xanh đậm
(primary) khi chưa chọn, sáng cam như đèn LED khi active. ----- */
#employeeAdminPage .ot-admin-tabs {
border-bottom: 0;
gap: 10px;
row-gap: 10px;
flex-wrap: wrap;
}
#employeeAdminPage .ot-admin-tabs .nav-link {
display: inline-flex;
align-items: center;
border: 1px solid #d7e6fb;
border-radius: 12px;
padding: 10px 22px;
font-weight: 800;
font-size: .95rem;
color: #0b4ea2;
background: #f3f8ff;
transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
#employeeAdminPage .ot-admin-tabs .nav-link i {
color: #1058b8;
transition: color .18s ease;
}
#employeeAdminPage .ot-admin-tabs .nav-link:hover:not(.disabled) {
border-color: #9cc4f5;
background: #e8f1ff;
color: #08386e;
transform: translateY(-1px);
}
/* Tab đang chọn: sáng cam như đèn LED - khớp .ot-admin-tabs bên Quản lý đợt làm thêm. */
#employeeAdminPage .ot-admin-tabs .nav-link.active {
color: #fff;
border-color: #ff8f2a;
background: linear-gradient(135deg, #ffb454 0%, #ff8f2a 60%, #f4740a 100%);
box-shadow: 0 0 0 1px rgba(255, 173, 82, .35), 0 0 12px rgba(255, 146, 40, .55), 0 0 22px rgba(255, 146, 40, .35), 0 6px 14px rgba(180, 90, 10, .28);
text-shadow: 0 0 8px rgba(255, 214, 160, .65);
}
#employeeAdminPage .ot-admin-tabs .nav-link.active i {
color: #fff;
}
/* [MỚI] Tab chưa mở ở giai đoạn này (disabled) - giữ mờ, không ăn theo
màu/hiệu ứng hover-active của các tab đang dùng được. */
#employeeAdminPage .ot-admin-tabs .nav-link.disabled {
color: #9aa7bb;
background: #f3f5f8;
border-color: #e3e7ee;
cursor: not-allowed;
}
@media (max-width: 576px) {
#employeeAdminPage .ot-admin-tabs .nav-link {
padding: 8px 14px;
font-size: .88rem;
}
}
/* ----- (2) Cụm tìm kiếm/lọc nhanh và (3) cụm bảng danh sách nhân sự: viền
cam sáng đèn LED bao quanh từng cụm .app-card, cùng tông màu với tab
active ở trên và viền nội dung của trang Quản lý đợt làm thêm. ----- */
#employeeAdminPage .app-card {
border: 1.5px solid #ff9d3d;
box-shadow: 0 0 0 1px rgba(255, 173, 82, .28), 0 0 14px rgba(255, 146, 40, .45), 0 0 26px rgba(255, 146, 40, .22), 0 10px 22px rgba(180, 90, 10, .10);
}
/* ----- [MỚI - ADR-0006 GĐ 2] Nút "Sửa" trên bảng Danh sách nhân sự - dùng lại
đúng class .request-action-btn--icon3d/.tone-edit đã có, cần khai báo riêng vì
các rule gốc chỉ scope theo #overtimeAdminPage/#overtimeRequestsPage. ----- */
#employeeAdminPage .request-action-btn.request-action-btn--icon3d {
width: 32px;
height: 32px;
min-width: 32px;
padding: 0;
border-radius: 12px;
border: 1px solid transparent;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0;
transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
box-shadow: inset 0 1px 0 rgba(255,255,255,.48), 0 4px 10px rgba(14, 29, 56, .18), 0 0 0 1px rgba(255,255,255,.06);
}
#employeeAdminPage .request-action-btn.request-action-btn--icon3d i {
font-size: 0.9rem;
filter: drop-shadow(0 1px 0 rgba(255,255,255,.45));
}
#employeeAdminPage .request-action-btn.request-action-btn--icon3d:hover {
transform: translateY(-2px);
filter: saturate(1.06);
}
#employeeAdminPage .request-action-btn.request-action-btn--icon3d:active {
transform: translateY(0);
box-shadow: inset 0 2px 4px rgba(0,0,0,.14), 0 2px 6px rgba(14, 29, 56, .14);
}
#employeeAdminPage .request-action-btn.tone-edit {
color: #fff;
border-color: #6b4fd1;
background: linear-gradient(180deg, #9c85f0 0%, #6b4fd1 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 11px rgba(107,79,209,.33);
}
@media (max-width: 768px) {
#employeeAdminPage .request-action-btn.request-action-btn--icon3d {
width: 28px;
height: 28px;
min-width: 28px;
border-radius: 10px;
}
}
/* ----- [MỚI] Cân đối lại nút "Thêm nhân sự" so với nút "Làm mới" cạnh nó:
.app-btn-primary gốc có min-height:46px dành cho nút lớn (trang Đăng nhập),
khi ghép với .btn-sm như ở page-heading trang này làm nút bị to lệch hẳn so
với .app-btn-outline (dùng .btn-sm không bị ép min-height). Bỏ ép chiều cao
để 2 nút cùng hàng cao bằng nhau, chỉ giữ lại màu/đổ bóng đặc trưng. ----- */
#employeeAdminPage .page-meta .app-btn-primary.btn-sm {
min-height: 0;
box-shadow: 0 4px 10px rgba(7, 86, 184, .18);
}
/* ----- [MỚI] Modal Thêm/Sửa nhân sự (#empFormModal) - đồng bộ viền/đèn LED
cam của trang (khớp .ot-admin-tabs khi active + .app-card), tái sử dụng bố
cục modal đổi mật khẩu (#changePasswordModal) làm khung sườn nhưng đổi tông
xanh sang cam. ----- */
#empFormModal .modal-content {
border: 1.5px solid #ff9d3d;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 0 0 1px rgba(255, 173, 82, .28), 0 0 14px rgba(255, 146, 40, .45), 0 0 26px rgba(255, 146, 40, .22), 0 24px 60px rgba(15, 38, 74, .22);
}
#empFormModal .modal-header {
align-items: center;
gap: 12px;
padding: 20px 24px;
border-bottom: 0;
background: linear-gradient(135deg, #ffb454 0%, #ff8f2a 60%, #f4740a 100%);
color: #fff;
}
#empFormModal .modal-header .modal-title {
font-weight: 800;
font-size: 1.12rem;
text-shadow: 0 0 8px rgba(255, 214, 160, .5);
}
#empFormModal .emp-form-header-icon {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 12px;
background: rgba(255, 255, 255, .22);
font-size: 1.15rem;
flex: 0 0 auto;
}
#empFormModal .modal-header .btn-close {
filter: brightness(0) invert(1);
opacity: .85;
}
#empFormModal .modal-header .btn-close:hover {
opacity: 1;
}
#empFormModal .modal-body {
padding: 22px 26px 8px;
}
#empFormModal .emp-form-section-label {
display: flex;
align-items: center;
font-weight: 800;
font-size: .84rem;
letter-spacing: .01em;
text-transform: uppercase;
color: #b45a0a;
margin-bottom: 10px;
}
#empFormModal .emp-form-section-label:not(:first-child) {
margin-top: 18px;
}
#empFormModal .emp-form-section-label i {
color: #ff8f2a;
}
#empFormModal .emp-form-flex-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
#empFormModal .emp-form-flex-field {
flex: 1 1 170px;
min-width: 150px;
}
#empFormModal .form-label {
color: #344054;
}
/* Hai nút Hủy/Lưu cân đối đều nhau: cùng chiều cao, cùng bo góc, cùng độ đậm chữ. */
#empFormModal .modal-footer {
padding: 16px 26px 22px;
border-top: 1px solid #FFE3BE;
gap: 10px;
}
#empFormModal .modal-footer .btn {
min-height: 44px;
min-width: 112px;
border-radius: 9px;
font-weight: 700;
}
/* Modal Thêm/Sửa nhân sự - giao diện mobile an toàn */
@media (max-width: 576px) {
#empFormModal .modal-dialog {
margin: 0.6rem auto;
max-width: calc(100vw - 0.8rem);
}
#empFormModal .modal-content {
max-height: calc(100dvh - 1.2rem);
border-radius: 14px;
overflow: hidden;
}
#empFormModal .modal-header {
padding: 12px 14px;
}
#empFormModal .modal-title {
font-size: 1.05rem;
}
#empFormModal .modal-body {
padding: 12px 14px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
#empFormModal .emp-form-flex-row {
gap: 10px;
}
#empFormModal .modal-footer {
padding: 10px 14px 12px;
}
#empFormModal .modal-footer .btn {
flex: 1 1 0;
min-height: 40px;
white-space: nowrap;
}
}
/* ============================================================
[MỚI - ADR-0006 GĐ 3] Class DÙNG CHUNG cho mọi modal từ GĐ 3 trở đi
(.emp-led-modal) - lặp lại ĐÚNG bộ rule của #empFormModal ở trên nhưng theo
class thay vì id, để tab "Phân công & Điều chuyển" (và các tab sau: Tài
khoản đăng nhập, Báo cáo...) tự động có viền/đèn LED cam đồng bộ mà không
phải khai riêng từng #id - đúng yêu cầu "các tab sau cũng dùng style UI
đồng bộ như vậy" (anh Tân xác nhận 06/09/2026). KHÔNG sửa lại #empFormModal
ở trên để tránh động vào CSS đã kiểm thử ở GĐ 2.
[SỬA 06/09/2026] Bỏ tiền tố "#employeeAdminPage " trước ".emp-led-modal":
4 modal (Thêm phân công, Điều chuyển, Bổ nhiệm CHT, Kết thúc phân công)
được khai báo trong Index.cshtml SAU thẻ đóng của
#employeeAdminPage (là anh/em ngang hàng, KHÔNG phải phần tử con), nên các
rule có dạng "#employeeAdminPage .emp-led-modal ..." không bao giờ khớp -
đây là lý do viền LED cam không hiện dù class .emp-led-modal đã có. Chỉ
cần chọn theo class .emp-led-modal (không ràng buộc vị trí DOM), giống
cách #empFormModal đã hoạt động đúng từ đầu vì chỉ dùng selector theo id. */
.emp-led-modal .modal-content {
border: 1.5px solid #ff9d3d;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 0 0 1px rgba(255, 173, 82, .28), 0 0 14px rgba(255, 146, 40, .45), 0 0 26px rgba(255, 146, 40, .22), 0 24px 60px rgba(15, 38, 74, .22);
}
.emp-led-modal .modal-header {
align-items: center;
gap: 12px;
padding: 20px 24px;
border-bottom: 0;
background: linear-gradient(135deg, #ffb454 0%, #ff8f2a 60%, #f4740a 100%);
color: #fff;
}
.emp-led-modal .modal-header .modal-title {
font-weight: 800;
font-size: 1.12rem;
text-shadow: 0 0 8px rgba(255, 214, 160, .5);
}
.emp-led-modal .emp-form-header-icon {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 12px;
background: rgba(255, 255, 255, .22);
font-size: 1.15rem;
flex: 0 0 auto;
}
.emp-led-modal .modal-header .btn-close {
filter: brightness(0) invert(1);
opacity: .85;
}
.emp-led-modal .modal-header .btn-close:hover {
opacity: 1;
}
.emp-led-modal .modal-body {
padding: 22px 26px 8px;
}
.emp-led-modal .form-label {
color: #344054;
}
.emp-led-modal .modal-footer {
padding: 14px 22px 18px;
border-top: 1px solid #FFE3BE;
gap: 8px;
}
/* [SỬA 06/09/2026] Thu nhỏ + cân đối nút chức năng theo yêu cầu (nhỏ hơn
#empFormModal vì các modal này thao tác nhanh/gọn, ít nút hơn). */
.emp-led-modal .modal-footer .btn {
min-height: 38px;
padding: 6px 18px;
border-radius: 8px;
font-weight: 700;
font-size: .88rem;
}
/* Hộp cảnh báo "cần xác nhận" (thay CHT / cửa hàng sẽ mồ côi) - tông vàng cam
cảnh báo, có nút "Vẫn tiếp tục" để gọi lại API với cờ xác nhận = true.
[SỬA 06/09/2026] Bỏ tiền tố "#employeeAdminPage " (lý do như trên - hộp
này được showConfirmBox() chèn vào bên trong modal-body của các modal
emp-led-modal, vốn nằm ngoài #employeeAdminPage). */
.emp-confirm-box {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px 14px;
border-radius: 10px;
background: #FFF6E8;
border: 1px solid #FFCE87;
color: #7A4A00;
font-size: .88rem;
margin-bottom: 14px;
}
.emp-confirm-box .btn {
align-self: flex-end;
min-height: 34px;
font-weight: 700;
border-radius: 8px;
}
@media (max-width: 576px) {
.emp-led-modal .modal-dialog {
margin: 0.6rem auto;
max-width: calc(100vw - 0.8rem);
}
.emp-led-modal .modal-content {
max-height: calc(100dvh - 1.2rem);
border-radius: 14px;
overflow: hidden;
}
.emp-led-modal .modal-header {
padding: 12px 14px;
}
.emp-led-modal .modal-title {
font-size: 1.05rem;
}
.emp-led-modal .modal-body {
padding: 12px 14px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.emp-led-modal .modal-footer {
padding: 10px 14px 12px;
}
.emp-led-modal .modal-footer .btn {
flex: 1 1 0;
min-height: 36px;
white-space: nowrap;
}
}
/* ----- [MỚI - ADR-0006 GĐ 3] Tab "Phân công & Điều chuyển": ô tìm/chọn nhân
sự (danh sách kết quả dạng thẻ bấm được) + bảng lịch sử phân công. ----- */
#employeeAdminPage .lifecycle-picker-results {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 260px;
overflow-y: auto;
border: 1px solid #e3ebf6;
border-radius: 10px;
padding: 6px;
background: #fff;
}
#employeeAdminPage .lifecycle-picker-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid transparent;
background: #f6f9ff;
cursor: pointer;
text-align: left;
font-size: .88rem;
color: #1b2a4a;
transition: background-color .15s ease, border-color .15s ease;
}
#employeeAdminPage .lifecycle-picker-item:hover {
background: #eaf1ff;
border-color: #b9d2f7;
}
#employeeAdminPage .lifecycle-picker-item .lifecycle-picker-item-name {
font-weight: 700;
}
#employeeAdminPage .lifecycle-picker-item .lifecycle-picker-item-meta {
font-size: .78rem;
color: #71809a;
}
#employeeAdminPage .lifecycle-cht-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 999px;
font-size: .74rem;
font-weight: 800;
color: #fff;
background: linear-gradient(135deg, #ffb454 0%, #ff8f2a 60%, #f4740a 100%);
}
#employeeAdminPage .lifecycle-row-closed {
opacity: .6;
}
/* [MỚI 06/09/2026 - phản hồi anh Tân] Cột "Cửa hàng" ở bảng lịch sử phân công
quá rộng so với các cột còn lại -> giới hạn chiều rộng + rút gọn (ellipsis)
nếu tên cửa hàng dài, xem đầy đủ qua title (tooltip trình duyệt). */
#employeeAdminPage .lifecycle-timeline-table td:first-child {
max-width: 260px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* [MỚI 06/09/2026] Badge màu cho cột Trạng thái (đang hiệu lực = xanh lá, đã kết
thúc = xám) - trước đó là chữ thường, khó phân biệt nhanh bằng mắt. */
#employeeAdminPage .lifecycle-status-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 999px;
font-size: .76rem;
font-weight: 800;
}
#employeeAdminPage .lifecycle-status-badge--open {
color: #0a6b3a;
background: #E3F8EC;
}
#employeeAdminPage .lifecycle-status-badge--closed {
color: #64748b;
background: #EEF1F6;
}
/* [MỚI 06/09/2026 - ADR-0006 mục 13] Hộp thông tin "đang chờ tự kích hoạt" -
hiển thị cho HR biết hệ thống ĐÃ ghi nhận thay đổi ngày hiệu lực tương lai và
sẽ tự áp dụng, không cần làm gì thêm (tránh cảm giác "lưu xong mà không thấy
gì đổi" khi ngày hiệu lực chưa tới). */
#employeeAdminPage .lifecycle-pending-box {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 8px;
padding: 8px 12px;
border-radius: 10px;
background: #FFF6E8;
border: 1px solid #FFCE87;
color: #7A4A00;
font-size: .8rem;
}
#employeeAdminPage .lifecycle-pending-box .lifecycle-pending-item {
display: flex;
align-items: center;
gap: 6px;
}
#employeeAdminPage .lifecycle-pending-box i {
color: #F58A00;
}
/* [CẬP NHẬT 06/09/2026 - phản hồi anh Tân lần 2] "Ô chọn cửa hàng" có tìm kiếm -
bỏ component tự viết (.store-combo, bị lỗi hiển thị trùng mã cửa hàng) để DÙNG
LẠI ĐÚNG component "search-picker" đã có sẵn, đã kiểm thử ở Bước 1 màn "Đăng ký
làm thêm giờ" (wwwroot/js/overtime-create.js, CSS .search-picker-menu/-options/
-item/-empty ở phần trên file này) - style/hành vi đồng bộ tuyệt đối, không có
bộ CSS riêng thứ 2 cho cùng 1 kiểu control. Style .search-picker-* dùng chung
toàn app (không cần lặp lại/scope riêng #employeeAdminPage). */
/* ============================================================
[MỚI] Trang "Hướng dẫn sử dụng" (#guidePage).
Đồng bộ khung/thẻ với .app-card đang dùng ở các trang khác (bo góc,
đổ bóng, tiêu đề đậm), cộng thêm viền "đèn LED" cam/xanh primary xen kẽ
theo yêu cầu - cùng kiểu hiệu ứng với Toast thông báo (notif-toast).
============================================================ */
.guide-role-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: 12px;
background: var(--app-primary-light);
color: var(--app-primary-dark);
font-weight: 700;
margin-bottom: 18px;
}
.guide-role-banner i {
font-size: 1.1rem;
}
@keyframes guideLedGlowBlue {
0%, 100% {
box-shadow: 0 0 0 1px rgba(7, 86, 184, .16), 0 12px 28px rgba(15, 38, 74, .07), 0 0 10px rgba(7, 86, 184, .14);
}
50% {
box-shadow: 0 0 0 1px rgba(7, 86, 184, .30), 0 12px 28px rgba(15, 38, 74, .07), 0 0 20px rgba(7, 86, 184, .34);
}
}
@keyframes guideLedGlowOrange {
0%, 100% {
box-shadow: 0 0 0 1px rgba(245, 138, 0, .18), 0 12px 28px rgba(15, 38, 74, .07), 0 0 10px rgba(245, 138, 0, .16);
}
50% {
box-shadow: 0 0 0 1px rgba(245, 138, 0, .34), 0 12px 28px rgba(15, 38, 74, .07), 0 0 20px rgba(245, 138, 0, .38);
}
}
/* Thẻ từng mục - khớp bo góc/đổ bóng nền của .app-card, xen kẽ viền LED
xanh primary / cam theo thứ tự lẻ - chẵn. */
.guide-accordion .accordion-item {
border: 1px solid var(--app-border);
border-radius: 14px !important;
overflow: hidden;
margin-bottom: 14px;
background: #fff;
}
.guide-accordion .accordion-item:nth-child(odd) {
border-color: rgba(7, 86, 184, .30);
animation: guideLedGlowBlue 3.4s ease-in-out infinite;
}
.guide-accordion .accordion-item:nth-child(even) {
border-color: rgba(245, 138, 0, .34);
animation: guideLedGlowOrange 3.4s ease-in-out infinite;
}
.guide-accordion .accordion-button {
font-weight: 800;
font-size: 1.02rem;
color: #1c2a44;
background: #fff;
padding: 15px 18px;
}
.guide-accordion .accordion-button:not(.collapsed) {
color: var(--app-primary-dark);
background: var(--app-primary-light);
box-shadow: none;
}
.guide-accordion .accordion-button:focus {
box-shadow: none;
border-color: var(--app-border);
}
.guide-accordion .accordion-body {
color: var(--app-text);
font-size: .94rem;
line-height: 1.6;
padding: 18px;
border-top: 1px solid #e8eef7;
}
.guide-accordion .accordion-body h3 {
font-size: 1rem;
font-weight: 800;
color: var(--app-primary-dark);
margin: 14px 0 8px;
}
.guide-accordion .accordion-body h3:first-child {
margin-top: 0;
}
.guide-accordion .accordion-body ul,
.guide-accordion .accordion-body ol {
padding-left: 1.25rem;
margin-bottom: 10px;
}
.guide-accordion .accordion-body li {
margin-bottom: 4px;
}
/* Khung bọc bảng dữ liệu trong bài hướng dẫn - viền LED xanh primary sáng
nhẹ, bo góc để đồng bộ với .app-table đang dùng ở các trang khác. */
.guide-table-wrap {
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(7, 86, 184, .28);
box-shadow: 0 0 0 1px rgba(7, 86, 184, .10), 0 0 14px rgba(7, 86, 184, .16);
margin: 8px 0 14px;
}
.guide-accordion .accordion-body table {
width: 100%;
border-collapse: collapse;
font-size: .9rem;
margin: 0;
}
.guide-accordion .accordion-body th,
.guide-accordion .accordion-body td {
border-bottom: 1px solid var(--app-border);
padding: 8px 12px;
text-align: left;
vertical-align: top;
}
.guide-accordion .accordion-body tr:last-child td {
border-bottom: 0;
}
.guide-accordion .accordion-body th {
background: var(--app-primary-light);
color: var(--app-primary-dark);
font-weight: 700;
}
/* Chip trạng thái dùng trong bài hướng dẫn - cùng bảng màu với badge trạng
thái thật ở trang Hồ sơ làm thêm giờ, để người đọc liên tưởng đúng. */
.guide-status-chip {
display: inline-block;
border-radius: 999px;
font-weight: 700;
font-size: .74rem;
padding: 0.3rem 0.6rem;
color: #fff;
}
.guide-status-chip--draft { background: #64748b; }
.guide-status-chip--submitted { background: #1d63d6; }
.guide-status-chip--returned { background: #f59e0b; color: #1f2937; }
.guide-status-chip--approved { background: #1f8f55; }
/* [MỚI - ADR-0006 GĐ 3 phần 2, 07/09/2026] Thao tác hàng loạt ở tab "Danh sách
nhân sự" - thanh công cụ khi có dòng được chọn, khối "áp dụng cho" và danh
sách kết quả từng người trong 3 modal empBulkTransferModal/empBulkTypeModal/
empBulkLeaveModal. Dùng lại đúng tông cam LED (#FFE3BE/#FFCE87/#FFF6E8/#7A4A00)
đã chốt cho .emp-confirm-box để đồng bộ, không tạo bảng màu mới. */
.emp-bulk-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 10px;
background: #FFF6E8;
border: 1px solid #FFCE87;
}
.emp-bulk-count {
font-weight: 700;
color: #7A4A00;
margin-right: 4px;
}
.emp-bulk-target-list {
max-height: 160px;
overflow-y: auto;
padding: 10px 12px;
border-radius: 10px;
background: #FFF6E8;
border: 1px solid #FFCE87;
color: #7A4A00;
font-size: .85rem;
}
.emp-bulk-target-list .emp-bulk-target-chip {
display: inline-block;
margin: 2px 4px 2px 0;
padding: 2px 8px;
border-radius: 999px;
background: #fff;
border: 1px solid #FFCE87;
font-weight: 600;
}
.emp-bulk-results {
max-height: 320px;
overflow-y: auto;
border: 1px solid var(--app-border);
border-radius: 10px;
}
.emp-bulk-result-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 12px;
border-bottom: 1px solid var(--app-border);
font-size: .88rem;
}
.emp-bulk-result-row:last-child {
border-bottom: 0;
}
.emp-bulk-result-row .emp-bulk-result-info {
min-width: 0;
}
.emp-bulk-result-row .emp-bulk-result-name {
font-weight: 700;
}
.emp-bulk-result-row .emp-bulk-result-message {
color: #6b7280;
font-size: .8rem;
}
.emp-bulk-result-row .btn {
flex: none;
min-height: 30px;
padding: 3px 12px;
font-size: .8rem;
font-weight: 700;
border-radius: 8px;
}
/* [MỚI - ADR-0006 GĐ 4, 07/09/2026] Hộp hiển thị mật khẩu tạm sau khi Cấp tài
khoản/Reset mật khẩu (empBulkResult tái dùng .alert-success của Bootstrap nên
chỉ cần style riêng cho chữ mật khẩu - to, đơn cách, dễ đọc/dễ chép). */
.emp-temp-password-code {
font-size: 1.05rem;
font-weight: 700;
letter-spacing: .04em;
padding: 4px 10px;
border-radius: 8px;
background: #fff;
border: 1px solid #b6e2c8;
color: #14532d;
}
/* [MỚI - ADR-0006 GĐ 5, 07/09/2026] Tab "Báo cáo & Cảnh báo" - tái dùng nguyên
.stat-card/.app-card/.app-table đã có, chỉ thêm 2 tiện ích nhỏ: bảng gọn cho
danh sách headcount/xu hướng theo tháng, và trạng thái "bấm được" cho các thẻ
số liệu nhảy sang Tab 1 với đúng bộ lọc nhanh. */
#employeeAdminPage .app-table-sm th,
#employeeAdminPage .app-table-sm td {
padding: 6px 4px;
font-size: .86rem;
border-bottom: 1px solid #eef2f7;
}
#employeeAdminPage .app-table-sm tr:last-child th,
#employeeAdminPage .app-table-sm tr:last-child td {
border-bottom: none;
}
#employeeAdminPage .report-clickable {
cursor: pointer;
transition: transform .12s ease, box-shadow .12s ease;
}
#employeeAdminPage .report-clickable:hover {
transform: translateY(-2px);
box-shadow: 0 14px 26px rgba(15, 39, 78, .12);
}
/* Thẻ cảnh báo nhỏ trong lưới "Cảnh báo cần xử lý" / "Dữ liệu cần dọn". */
#employeeAdminPage .report-warn-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid #eef2f7;
background: #f8fafc;
width: 100%;
}
#employeeAdminPage .report-warn-item.report-clickable:hover {
border-color: #ffcf94;
background: #fff8ef;
}
#employeeAdminPage .report-warn-item .report-warn-label {
font-size: .86rem;
color: #3a4a63;
font-weight: 600;
}
#employeeAdminPage .report-warn-item .report-warn-value {
font-size: 1.1rem;
font-weight: 800;
color: #b3541e;
}
#employeeAdminPage .report-warn-item .report-warn-value.report-warn-value--ok {
color: #1a8f5d;
}
@media (prefers-reduced-motion: reduce) {
.guide-accordion .accordion-item:nth-child(odd),
.guide-accordion .accordion-item:nth-child(even) {
animation: none;
}
}