:root {
  --ui-accent: #5267d8;
  --ui-accent-strong: #4054bd;
  --ui-accent-soft: #eef1ff;
  --ui-teal: #0e9c8d;
  --ui-teal-soft: #e5f7f4;
  --ui-amber: #c98616;
  --ui-amber-soft: #fff5df;
  --ui-danger: #c84f5a;
  --ui-danger-soft: #fff0f1;
  --ui-line: #e2e8f2;
}

.card {
  border-color: var(--ui-line);
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(47, 65, 110, .045);
}
.card-header {
  background: linear-gradient(115deg, #f2f5ff 0%, #f4f9ff 52%, #f8f5ff 100%);
  border-bottom-color: #e5eafa;
}
.card-header h4, .card-header h5 { color: #344568; }
.table thead th { background: #f0f4fb; border-bottom-color: #e1e8f4; }
.table tbody tr:hover > * { background-color: #f7f9ff; }
.table-light > * { --bs-table-bg: #edf2ff; --bs-table-color: #3c5282; color: #3c5282; }

.btn { transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(54, 72, 125, .12); }
.btn-primary { background: linear-gradient(135deg, #586fe0, #4054bd); border-color: #4054bd; }
.btn-soft-primary { color: #4054bd; background: var(--ui-accent-soft); border: 1px solid #dce3ff; }
.btn-soft-primary:hover, .btn-outline-primary:hover { color: #fff; background: var(--ui-accent-strong); border-color: var(--ui-accent-strong); }
.btn-success { background: linear-gradient(135deg, #11a98f, #098877); border-color: #098877; }
.btn-soft-success { color: #087e70; background: var(--ui-teal-soft); border: 1px solid #c8eee8; }
.btn-warning { color: #563800; background: #f5bd52; border-color: #f5bd52; }
.btn-soft-warning { color: #8c5a00; background: var(--ui-amber-soft); border: 1px solid #f4e2b9; }
.btn-danger { background: #cc5660; border-color: #cc5660; }
.btn-soft-danger { color: #b43d49; background: var(--ui-danger-soft); border: 1px solid #f5d8db; }
.btn-info { color: #155b78; background: #8ed9ed; border-color: #8ed9ed; }
.btn-soft-info { color: #146987; background: #e5f7fc; border: 1px solid #ccecf5; }
.btn-light { background: #f1f4f9; border-color: #e4e9f1; }

.form-control, .form-select {
  border-color: #d6dfed;
  border-radius: 7px;
  background-color: #fcfdff;
}
.form-control:focus, .form-select:focus {
  border-color: #8393eb;
  background-color: #fff;
  box-shadow: 0 0 0 .2rem rgba(82, 103, 216, .13);
}
.form-check-input { border-color: #aebbd0; }
.form-check-input:checked { background-color: var(--ui-accent); border-color: var(--ui-accent); }
.alert-info { color: #245a78; background-color: #e7f5fb; border-color: #c8e8f4; }
.alert-success { color: #176b5c; background-color: #e9f7f2; border-color: #cdece1; }
.alert-warning { color: #76500b; background-color: #fff6e4; border-color: #f2e0b8; }
.alert-danger { color: #963d47; background-color: #fff0f1; border-color: #f2d4d8; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}
/* Strong, role-based action colors make the main actions easier to scan. */
.btn-soft-primary { color: #fff; background: #5068d8; border: 1px solid #4058c4; }
.btn-soft-primary:hover, .btn-soft-primary:focus-visible { color: #fff; background: #3f55bd; border-color: #354aa9; }
.btn-soft-success { color: #fff; background: #12967c; border: 1px solid #0c806a; }
.btn-soft-success:hover, .btn-soft-success:focus-visible { color: #fff; background: #0b7965; border-color: #086854; }
.btn-soft-info { color: #fff; background: #159fbd; border: 1px solid #1086a2; }
.btn-soft-info:hover, .btn-soft-info:focus-visible { color: #fff; background: #0d7f9a; border-color: #0a6e86; }
.btn-soft-warning { color: #493000; background: #f2c14e; border: 1px solid #dca72f; }
.btn-soft-warning:hover, .btn-soft-warning:focus-visible { color: #392500; background: #e8b130; border-color: #c9921b; }
.btn-soft-danger { color: #fff; background: #d7535f; border: 1px solid #c13d4a; }
.btn-soft-danger:hover, .btn-soft-danger:focus-visible { color: #fff; background: #b93643; border-color: #a62e3a; }

/* Recolor shared soft-blue action buttons according to their operation. */
.btn[data-act="new"], .btn[data-act="existing"], .btn[class*="-add"], .btn[class*="-edit"],
.btn[class*="-copy"], .btn[data-act="box"], .btn[data-act="pallet"], .btn[data-act="auto-boxes"] {
  color: #fff; background: #ed922e; border-color: #d87a17;
}
.btn[data-act="new"]:hover, .btn[data-act="existing"]:hover, .btn[class*="-add"]:hover,
.btn[class*="-edit"]:hover, .btn[class*="-copy"]:hover, .btn[data-act="box"]:hover,
.btn[data-act="pallet"]:hover, .btn[data-act="auto-boxes"]:hover {
  color: #fff; background: #d97916; border-color: #bd6410;
}
.btn[data-act="save"], .btn[data-act*="save"], .btn[data-act="create"], .btn[data-act*="create"],
.btn[data-act="dispatch"], .btn[class*="-save"], .btn[class*="-create"], .btn[class*="-new"],
.btn[class*="-upload"], .btn[class*="-confirm"] {
  color: #fff; background: #159879; border-color: #0e8065;
}
.btn[data-act="save"]:hover, .btn[data-act*="save"]:hover, .btn[data-act="create"]:hover,
.btn[data-act*="create"]:hover, .btn[data-act="dispatch"]:hover, .btn[class*="-save"]:hover,
.btn[class*="-create"]:hover, .btn[class*="-new"]:hover, .btn[class*="-upload"]:hover,
.btn[class*="-confirm"]:hover { color: #fff; background: #0c7c63; border-color: #086850; }
.btn[data-act*="remove"], .btn[data-act*="archive"], .btn[data-act="cancel"],
.btn[class*="-delete"], .btn[class*="-remove"], .btn[class*="-void"], .btn[class*="-cancel"], .btn[class*="-archive"] {
  color: #fff; background: #d7535f; border-color: #c13d4a;
}
.btn[data-act*="remove"]:hover, .btn[data-act*="archive"]:hover, .btn[data-act="cancel"]:hover,
.btn[class*="-delete"]:hover, .btn[class*="-remove"]:hover, .btn[class*="-void"]:hover,
.btn[class*="-cancel"]:hover, .btn[class*="-archive"]:hover { color: #fff; background: #b93643; border-color: #a62e3a; }
.btn[class*="-review"], .btn[class*="-retry"], .btn[class*="-followup"], .btn[class*="-remind"] {
  color: #493000; background: #f2c14e; border-color: #dca72f;
}
.btn[data-act="edit"], .btn[data-act="new"], .btn[data-act="existing"], .btn[data-act="upload"],
.btn[class*="-edit"], .btn[class*="-add"], .btn[class*="-copy"] {
  color: #fff; background: #ed922e; border-color: #d87a17;
}
.btn[data-act="upload"], .btn[class*="-upload"] { color: #fff; background: #159879; border-color: #0e8065; }
.btn[data-act="credit"], .btn[data-act="approve"], .btn[data-act="confirm"] { color: #fff; background: #159879; border-color: #0e8065; }
.btn[data-act="remove"], .btn[data-act="archive"], .btn[data-act="cancel"], .btn[data-act="void"] {
  color: #fff; background: #d7535f; border-color: #c13d4a;
}
.btn[data-act="review"], .btn[data-act="retry"], .btn[data-act="followup"], .btn[data-act="remind"] {
  color: #493000; background: #f2c14e; border-color: #dca72f;
}
.btn[data-act="edit"]:hover, .btn[data-act="new"]:hover, .btn[data-act="existing"]:hover,
.btn[class*="-edit"]:hover, .btn[class*="-add"]:hover, .btn[class*="-copy"]:hover {
  color: #fff; background: #d97916; border-color: #bd6410;
}
.btn[data-act="upload"]:hover, .btn[data-act="credit"]:hover, .btn[data-act="approve"]:hover,
.btn[data-act="confirm"]:hover, .btn[class*="-upload"]:hover {
  color: #fff; background: #0c7c63; border-color: #086850;
}
.btn[data-act="remove"]:hover, .btn[data-act="archive"]:hover, .btn[data-act="cancel"]:hover,
.btn[data-act="void"]:hover { color: #fff; background: #b93643; border-color: #a62e3a; }

/* Light, outlined controls: vivid role colors without the heavy filled-button look. */
.btn { border-radius: 4px; font-weight: 500; box-shadow: none; transform: none; }
.btn:hover { transform: none; box-shadow: none; }
.btn-primary, .btn-soft-primary { color: #526ce0; border-color: #526ce0; background: #fff; }
.btn-secondary, .btn-soft-secondary { color: #7055c8; border-color: #8065d6; background: #fff; }
.btn-success, .btn-soft-success { color: #118b70; border-color: #159879; background: #fff; }
.btn-info, .btn-soft-info { color: #168ba5; border-color: #20a9c7; background: #fff; }
.btn-warning, .btn-soft-warning { color: #b77913; border-color: #df9b25; background: #fff; }
.btn-danger, .btn-soft-danger { color: #cc4855; border-color: #d7535f; background: #fff; }
.btn-dark { color: #343a40; border-color: #343a40; background: #fff; }
.btn-primary:hover, .btn-soft-primary:hover { color: #fff; background: #526ce0; border-color: #526ce0; }
.btn-secondary:hover, .btn-soft-secondary:hover { color: #fff; background: #7055c8; border-color: #7055c8; }
.btn-success:hover, .btn-soft-success:hover { color: #fff; background: #118b70; border-color: #118b70; }
.btn-info:hover, .btn-soft-info:hover { color: #fff; background: #168ba5; border-color: #168ba5; }
.btn-warning:hover, .btn-soft-warning:hover { color: #fff; background: #b77913; border-color: #b77913; }
.btn-danger:hover, .btn-soft-danger:hover { color: #fff; background: #cc4855; border-color: #cc4855; }
.btn-dark:hover { color: #fff; background: #343a40; border-color: #343a40; }
.btn:focus-visible { box-shadow: 0 0 0 .18rem rgba(82,108,224,.2); }
.btn-sm { padding: .3rem .6rem; font-size: .82rem; }
.btn-group { gap: .35rem; }
.btn-group > .btn { margin-left: 0 !important; border-radius: 4px !important; }
.btn[data-act="edit"], .btn[data-act="new"], .btn[data-act="existing"], .btn[class*="-edit"], .btn[class*="-add"], .btn[class*="-copy"] { color: #c47718; border-color: #df922d; background: #fff; }
.btn[data-act="edit"]:hover, .btn[data-act="new"]:hover, .btn[data-act="existing"]:hover, .btn[class*="-edit"]:hover, .btn[class*="-add"]:hover, .btn[class*="-copy"]:hover { color: #fff; border-color: #df922d; background: #df922d; }
.btn[data-act="save"], .btn[data-act*="save"], .btn[data-act*="create"], .btn[data-act="dispatch"], .btn[data-act="upload"], .btn[data-act="credit"], .btn[data-act="approve"], .btn[data-act="confirm"], .btn[class*="-save"], .btn[class*="-create"], .btn[class*="-new"], .btn[class*="-upload"], .btn[class*="-confirm"] { color: #118b70; border-color: #159879; background: #fff; }
.btn[data-act="save"]:hover, .btn[data-act*="save"]:hover, .btn[data-act*="create"]:hover, .btn[data-act="dispatch"]:hover, .btn[data-act="upload"]:hover, .btn[data-act="credit"]:hover, .btn[data-act="approve"]:hover, .btn[data-act="confirm"]:hover, .btn[class*="-save"]:hover, .btn[class*="-create"]:hover, .btn[class*="-new"]:hover, .btn[class*="-upload"]:hover, .btn[class*="-confirm"]:hover { color: #fff; border-color: #159879; background: #159879; }
.btn[data-act*="remove"], .btn[data-act*="archive"], .btn[data-act="cancel"], .btn[data-act="void"], .btn[class*="-delete"], .btn[class*="-remove"], .btn[class*="-void"], .btn[class*="-cancel"], .btn[class*="-archive"] { color: #cc4855; border-color: #d7535f; background: #fff; }
.btn[data-act*="remove"]:hover, .btn[data-act*="archive"]:hover, .btn[data-act="cancel"]:hover, .btn[data-act="void"]:hover, .btn[class*="-delete"]:hover, .btn[class*="-remove"]:hover, .btn[class*="-void"]:hover, .btn[class*="-cancel"]:hover, .btn[class*="-archive"]:hover { color: #fff; border-color: #d7535f; background: #d7535f; }
.btn[class*="-review"], .btn[class*="-retry"], .btn[class*="-followup"], .btn[class*="-remind"] { color: #b77913; border-color: #df9b25; background: #fff; }
.btn.app-uniform-button {
 width:124px !important; min-width:124px !important; max-width:124px !important;
 height:32px !important; min-height:32px !important; max-height:32px !important;
 display:inline-flex; flex:0 0 auto !important; align-items:center; justify-content:center;
 padding:5px 9px !important; font-size:12px !important; line-height:20px !important;
 white-space:nowrap; overflow:hidden; vertical-align:middle;
}
.app-button-viewport { display:block; width:100%; min-width:0; overflow:hidden; }
.app-button-caption { display:block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-button-overflow:is(:hover,:focus-visible) .app-button-caption {
 width:max-content; min-width:100%; overflow:visible; text-overflow:clip;
 animation:app-button-scroll var(--button-scroll-duration,4s) .35s ease-in-out infinite alternate;
}
@keyframes app-button-scroll { from { transform:translateX(0); } to { transform:translateX(calc(-1 * var(--button-overflow,0px))); } }
@media (prefers-reduced-motion:reduce) { .app-button-overflow:is(:hover,:focus-visible) .app-button-caption { animation:none; } }
.ui-language-control { display:inline-flex; align-items:center; margin:0 6px; min-width:0; }
.ui-language-select { width:88px; height:28px; min-height:28px; padding:3px 24px 3px 8px; background-position:right 7px center; background-size:12px 9px; font-size:12px; line-height:20px; border-radius:5px; }
.user-profile-menu { margin-left:12px; }
.user-profile-toggle { display:flex; align-items:center; gap:10px; padding:7px 10px; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:rgba(255,255,255,.06); color:#eef2ff; }
.user-profile-toggle:hover { background:rgba(255,255,255,.12); }
.user-profile-avatar,.user-profile-initials { width:38px; height:38px; flex-shrink:0; border-radius:50%; object-fit:cover; }
.user-profile-initials { display:inline-flex; align-items:center; justify-content:center; font-weight:600; font-size:13px; background:#e8edff; color:#4054bd; }
.user-profile-summary { display:flex; flex-direction:column; text-align:left; max-width:170px; }
.user-profile-summary .user-name-text { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-profile-role { font-size:11px; color:#bbc7dd; margin-top:2px; }
.user-profile-dropdown { min-width:230px; border-radius:10px; padding:6px; }
.user-profile-menu-heading { display:flex; flex-direction:column; gap:3px; padding:10px 12px; }
.user-profile-menu-heading small { color:#7c899c; overflow-wrap:anywhere; }
.user-profile-dropdown .dropdown-item { border-radius:6px; padding:9px 12px; }
.portal-header .user-profile-toggle { color:#344568; background:#f4f6fb; border-color:#e2e8f2; }
.portal-header .user-profile-role { color:#7c899c; }
#user-profile-modal .modal-dialog { max-width:720px; }
.profile-editor { display:grid; grid-template-columns:210px minmax(0,1fr); gap:24px; }
.profile-photo-panel { display:flex; flex-direction:column; align-items:center; padding:18px 12px; border-radius:10px; background:#f4f6fb; }
#user-profile-preview { margin-bottom:16px; }
#user-profile-preview .user-profile-avatar,#user-profile-preview .user-profile-initials { width:112px; height:112px; font-size:32px; border:4px solid white; box-shadow:0 4px 16px rgba(40,55,90,.1); }
.profile-photo-panel .form-text { font-size:11px; text-align:center; margin-top:8px; }
.profile-password summary { cursor:pointer; color:var(--ui-accent-strong); padding:8px 0; }
@media(max-width:575px){.user-profile-summary { display:none; }.user-profile-toggle { gap:5px; padding:5px; }.profile-editor { grid-template-columns:1fr; gap:16px; }.profile-photo-panel { padding:12px; }#user-profile-preview .user-profile-avatar,#user-profile-preview .user-profile-initials { width:80px; height:80px; }}
#ps-settings .ps-tab {
 width:100%; min-width:0; max-width:none; height:auto; min-height:36px;
 padding:8px 12px; white-space:normal; overflow:visible;
 text-align:left; font-size:13px; line-height:1.4;
}