html {
  font-size: 16px;
}

:root {
  --mtip-primary: #2f4792;
  --mtip-secondary: #24357f;
  --mtip-accent: #019dd2;
  --mtip-success: #58a085;
  --mtip-bg: #f4f7fb;
  --mtip-surface: #fff;
  --mtip-surface-soft: #f8fbff;
  --mtip-border: #dce6f3;
  --mtip-text: #172033;
  --mtip-muted: #6b7280;
  --mtip-red: var(--mtip-primary);
  --mtip-red-dark: var(--mtip-secondary);
  --mtip-pink: #eaf1fb;
  --mtip-pink-strong: #dceafa;
}
.mtip-theme .sidebar-credit {
    color: rgba(255, 255, 255, .9) !important;
}
.sidebar-credit {
    color: var(--mtip-red-dark);
    display: flex;
    flex-direction: column;
    font-size: .78rem;
    line-height: 1.5;
    margin-top: auto;
/*    padding: 1rem;*/
}

.app-sidebar .sidebar-wrapper {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 61px);
}

.app-sidebar .sidebar-wrapper > nav {
    flex: 0 0 auto;
}

.mtip-theme,
.mtip-theme .app-main {
  background:
    radial-gradient(circle at 10% 0%, rgba(1, 157, 210, .1), transparent 30%),
    linear-gradient(135deg, #f7faff 0%, #eef4fb 100%);
  color: var(--mtip-text);
}

.mtip-theme .app-header {
  background: rgba(255, 255, 255, .94) !important;
  border-color: var(--mtip-border);
  box-shadow: 0 1px 12px rgba(36, 53, 127, .08);
}

.mtip-theme .app-sidebar {
  background: linear-gradient(180deg, var(--mtip-primary), var(--mtip-secondary)) !important;
}

.mtip-theme .app-sidebar .brand-link,
.mtip-theme .app-sidebar .brand-text,
.mtip-theme .app-sidebar .nav-link,
.mtip-theme .app-sidebar .text-primary {
  color: rgba(255, 255, 255, .9) !important;
}

.mtip-theme .app-sidebar .sidebar-menu .nav-link:hover {
  background: rgba(255, 255, 255, .11);
  color: #fff !important;
}

.mtip-theme .app-sidebar .sidebar-menu .nav-link.active {
  background: linear-gradient(135deg, var(--mtip-accent), #47b9e2) !important;
  box-shadow: 0 10px 24px rgba(1, 157, 210, .24);
  color: #fff !important;
}

.mtip-theme .card,
.mtip-theme .box {
  border-color: var(--mtip-border);
  box-shadow: 0 10px 28px rgba(36, 53, 127, .07);
}

.mtip-theme .card-header,
.mtip-theme .box-header,
.mtip-theme .table > thead > tr > th {
  background: var(--mtip-surface-soft);
  border-color: var(--mtip-border);
}

.mtip-theme .btn-primary,
.mtip-theme .btn-danger {
  background: var(--mtip-primary);
  border-color: var(--mtip-primary);
}

.mtip-theme .btn-primary:hover,
.mtip-theme .btn-primary:focus,
.mtip-theme .btn-danger:hover,
.mtip-theme .btn-danger:focus {
  background: var(--mtip-secondary);
  border-color: var(--mtip-secondary);
}

.mtip-theme .btn-outline-primary,
.mtip-theme .btn-outline-danger {
  border-color: var(--mtip-primary);
  color: var(--mtip-primary);
}

.mtip-theme .btn-outline-primary:hover,
.mtip-theme .btn-outline-danger:hover {
  background: var(--mtip-primary);
  border-color: var(--mtip-primary);
  color: #fff;
}

.mtip-theme .form-control:focus,
.mtip-theme .form-select:focus,
.mtip-theme .select2-container--focus .select2-selection {
  border-color: var(--mtip-accent) !important;
  box-shadow: 0 0 0 .25rem rgba(1, 157, 210, .13) !important;
}

.mtip-theme .modal-header {
  background: linear-gradient(100deg, var(--mtip-secondary), var(--mtip-primary) 58%, var(--mtip-accent));
  color: #fff;
}

.mtip-theme .card,
.mtip-theme .modal-content,
.mtip-theme .schedule-wrap {
  border-radius: 10px;
}

.mtip-theme .card,
.mtip-theme .btn,
.mtip-theme .nav-link {
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
}

.mtip-theme .nav-tabs {
  border-color: var(--mtip-border) !important;
}

.mtip-theme .nav-tabs .nav-link {
  color: var(--mtip-secondary) !important;
}

.mtip-theme .nav-tabs .nav-link.active {
  background: var(--mtip-surface) !important;
  border-color: var(--mtip-border) var(--mtip-border) var(--mtip-surface) !important;
  color: var(--mtip-primary) !important;
}

.mtip-theme .plan-info-bar,
.mtip-theme .wf-stepper,
.mtip-theme .wf-filter-row td {
  background: var(--mtip-surface-soft) !important;
}

.mtip-theme .wf-dot-current,
.mtip-theme .wf-dot-rejected {
  background: var(--mtip-primary) !important;
  border-color: var(--mtip-primary) !important;
}

.mtip-theme .swal2-confirm {
  background-color: var(--mtip-primary) !important;
}

.mtip-theme .ec-weekday {
  background: var(--mtip-secondary) !important;
}

.mtip-theme .ec-today {
  outline-color: var(--mtip-accent) !important;
}

.col-width-40 { width: 40px; }
.col-width-46 { width: 46px; }
.col-width-50 { width: 50px; }
.col-width-52 { width: 52px; }
.col-width-65 { width: 65px; }
.col-width-70 { width: 70px; }
.col-width-80 { width: 80px; }
.col-width-90 { width: 90px; }
.col-width-100 { width: 100px; }
.col-width-110 { width: 110px; }
.col-width-120 { width: 120px; }
.col-width-130 { width: 130px; }
.col-width-140 { width: 140px; }
.col-width-150 { width: 150px; }
.col-width-160 { width: 160px; }
.col-width-170 { width: 170px; }
.col-width-180 { width: 180px; }
.col-width-40-percent { width: 40%; }
.col-min-width-110 { min-width: 110px; }
.col-min-width-120 { min-width: 120px; }
.col-min-width-140 { min-width: 140px; }
.col-min-width-150 { min-width: 150px; }
.col-min-width-160 { min-width: 160px; }
.col-min-width-180 { min-width: 180px; }
.col-min-width-220 { min-width: 220px; }
.col-min-width-240 { min-width: 240px; }
.title-max-width { max-width: 420px; }
.text-uppercase-control { text-transform: uppercase; }
.font-size-base { font-size: 1rem; }
.font-size-95 { font-size: .95rem; }
.font-size-75 { font-size: .75rem; }
.font-size-65 { font-size: .65rem; }
.font-size-60 { font-size: .6rem; }
.row-hours-width { width: 72px; }
.table-min-height-0 { min-height: 0; }
.attachment-preview-frame { background: var(--mtip-surface-soft); border: 0; height: min(78vh, 820px); width: 100%; }
.ec-clickable { cursor: pointer; }
.shift-picker-label { background: rgba(0, 0, 0, .18); border-radius: 4px; font-size: 1rem; font-weight: 700; padding: 1px 8px; }
.bg-purple { background: #6f42c1 !important; }

.access-filter-row,
.access-filter-row > div {
  min-width: 0;
}

.access-filter-row .select2-container {
  max-width: 100%;
}

.access-filter-row .select2-selection--single {
  min-height: 38px;
}

.access-filter-row .select2-selection__rendered {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select2-dropdown {
  max-width: min(720px, calc(100vw - 2rem));
}

.select2-results__option,
.permission-matrix code {
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: break-word;
}

.schedule-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
}

.schedule-wrap {
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--mtip-border);
  border-radius: .75rem;
  background: var(--mtip-surface);
  box-shadow: 0 .4rem 1.2rem rgba(36, 53, 127, .08);
}

.schedule-table {
  min-width: 1180px;
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.schedule-table th,
.schedule-table td {
  border-color: var(--mtip-border);
  border-right: 1px solid var(--mtip-border);
  vertical-align: middle;
}

.schedule-table th:last-child,
.schedule-table td:last-child {
  border-right: none;
}

.schedule-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--mtip-surface-soft);
}

.schedule-table .week-row th {
  background: var(--mtip-primary);
  color: #fff;
  border-color: var(--mtip-secondary);
}

.schedule-table .week-title {
  font-size: 1.05rem;
  letter-spacing: .01em;
}

.schedule-table .shift-header th {
  color: var(--mtip-secondary);
  font-weight: 700;
}

.staff-col {
  min-width: 78px;
  width: 78px;
}

.name-col {
  min-width: 220px;
  width: 220px;
}

.shift-col {
  min-width: 86px;
}

.total-col {
  min-width: 78px;
}

.shift-cell {
  min-width: 86px;
  width: 86px;
  background: var(--mtip-surface-soft);
  padding: .3rem;
  transition: background-color .15s ease, box-shadow .15s ease;
  cursor: pointer;
}

.shift-cell.assigned {
  background: var(--mtip-pink);
}

.shift-cell.warning-cell {
  outline: 2px solid #f59e0b;
  outline-offset: -2px;
  background: #fff7ed;
}

.cell-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  min-height: 34px;
  margin: 0;
  cursor: pointer;
  border-radius: .5rem;
  color: var(--mtip-secondary);
}

.cell-hours {
  font-size: 1em;
}

.shift-check {
  display: none;
}

.shift-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 1em;
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
}

.shift-cell[draggable="true"] {
  cursor: grab;
}

.shift-cell[draggable="true"]:active {
  cursor: grabbing;
}

.shift-cell.dragging {
  opacity: .35;
}

.shift-cell.drag-over {
  outline: 2px dashed var(--mtip-accent) !important;
  outline-offset: -2px;
  background: var(--mtip-pink) !important;
}

.shift-cell.assigned .cell-toggle {
  color: var(--mtip-secondary);
  background: rgba(1, 157, 210, .08);
  box-shadow: inset 0 0 0 1px rgba(1, 157, 210, .16);
}

.shift-cell.assigned .cell-hours::before {
  content: "✓ ";
  color: var(--mtip-accent);
  font-weight: 700;
}

.note-text {
  max-width: 72px;
  margin: 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@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 rgba(1, 157, 210, .35);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.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;
}

/* ── Font-size đồng nhất ≥ 1rem ────────────────────────────── */
/* Bootstrap .small = 0.875em → override lên 1rem */
.small,
small {
  font-size: 1rem !important;
}

/* Bootstrap form controls sm = 0.875rem → 1rem */
.form-select-sm,
.form-control-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
  font-size: 1rem !important;
}

/* Bootstrap btn-sm = 0.875rem → 1rem */
.btn-sm {
  font-size: 1rem !important;
}

/* Bootstrap badge = 0.75em → 1rem */
.badge {
  font-size: 0.875rem !important;
}

/* Bootstrap fs-6 = 1rem đã đúng, fs-5 trở lên cũng đúng */
.select2-container .select2-selection--single {
    height: 37px !important;
}