:root {
  --sf-primary: #5b5bd6;
  --sf-primary-600: #4f4fc0;
  --sf-primary-700: #3f3faa;
  --sf-primary-50: #eeedfd;
  --sf-primary-100: #dcdbf9;
  --sf-pending: #c2410d;
  --sf-pending-bg: #fff1e6;
  --sf-progress: #1e40af;
  --sf-progress-bg: #dbeafe;
  --sf-vendor: #7c3aed;
  --sf-vendor-bg: #ede9fe;
  --sf-done: #166534;
  --sf-done-bg: #dcfce7;
  --sf-danger: #c62828;
  --sf-danger-bg: #ffebee;
  --sf-bg: #f7f8fb;
  --sf-card: #ffffff;
  --sf-border: #e6e8ee;
  --sf-text: #1f2330;
  --sf-text-sub: #6b7280;
  --sf-text-muted: #9ca3af;
  --sf-radius-sm: 8px;
  --sf-radius: 12px;
  --sf-radius-lg: 16px;
  --sf-radius-pill: 999px;
  --sf-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --sf-shadow: 0 4px 14px rgba(16, 24, 40, .07);
  --sf-shadow-lg: 0 14px 32px rgba(16, 24, 40, .12);
  --sf-ease: cubic-bezier(.2, .7, .2, 1);
  --sf-dur: 180ms;
}

body {
  font-family: 'Sarabun', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  font-variant-ligatures: none;
  background: var(--sf-bg);
  color: var(--sf-text);
}

.sf-role-admin { --sf-primary: #8c6ff7; --sf-primary-600: #7658e5; --sf-primary-700: #5c3fcb; --sf-primary-50: #efebff; --sf-primary-100: #e3dcff; --sf-hero-light: #b39afb; }
.sf-role-user { --sf-primary: #1f9ee0; --sf-primary-600: #1688c4; --sf-primary-700: #0d6fa6; --sf-primary-50: #e7f5fc; --sf-primary-100: #d5effb; --sf-hero-light: #57c2ed; }
.sf-role-technician { --sf-primary: #12b8a6; --sf-primary-600: #0e9e90; --sf-primary-700: #0b7b6e; --sf-primary-50: #e1f8f4; --sf-primary-100: #cff1eb; --sf-hero-light: #5be0ce; }
.sf-role-vendor, .sf-role-procurement { --sf-primary: #ff8c3d; --sf-primary-600: #e9782b; --sf-primary-700: #bf5d1e; --sf-primary-50: #ffeedf; --sf-primary-100: #ffe2ca; --sf-hero-light: #ffb37a; }
.sf-role-admin { --sf-role-shadow: rgba(140, 111, 247, .26); }
.sf-role-user { --sf-role-shadow: rgba(31, 158, 224, .24); }
.sf-role-technician { --sf-role-shadow: rgba(18, 184, 166, .24); }
.sf-role-vendor, .sf-role-procurement { --sf-role-shadow: rgba(255, 140, 61, .24); }

.sidebar {
  width: 240px;
  background: var(--sf-card);
  border-right: 1px solid var(--sf-border);
  box-shadow: 2px 0 16px rgba(16, 24, 40, .04);
  padding: 16px 12px;
}

.sidebar-logo {
  padding: 4px 6px 16px;
  margin-bottom: 12px;
  border-bottom-color: var(--sf-border);
}

.sidebar-logo img,
.sf-logo-img {
  width: 42px !important;
  height: 42px !important;
  object-fit: contain;
  padding: 5px;
  border-radius: 14px;
  background: var(--sf-primary);
  box-shadow: 0 6px 14px var(--sf-role-shadow);
}

.sidebar-user {
  margin-bottom: 8px;
  padding: 12px;
  background: var(--sf-primary-50);
  border: 1px solid var(--sf-border);
  border-radius: 16px;
}

.app-name,
.topbar-title,
.user-name,
.nav-link-item {
  color: var(--sf-text);
}

.app-sub,
.user-role,
.nav-section-label,
.stat-label {
  color: var(--sf-text-sub);
}

.nav-link-item {
  min-height: 40px;
  margin-bottom: 3px;
  padding: 9px 12px;
  border-left: 0;
  border-radius: 13px;
  transition: background var(--sf-dur) var(--sf-ease), color var(--sf-dur) var(--sf-ease), transform var(--sf-dur) var(--sf-ease);
}

.nav-link-item:hover {
  background: var(--sf-primary-50);
  color: var(--sf-primary-700);
  transform: translateX(2px);
}

.nav-link-item.active {
  background: var(--sf-primary);
  color: #fff;
  box-shadow: 0 7px 16px var(--sf-role-shadow);
  font-weight: 600;
}

.nav-link-item.active i { color: #fff; }
.nav-link-item.text-danger { margin-top: 4px; }
.nav-link-item.text-danger:hover { background: var(--sf-danger-bg); color: var(--sf-danger) !important; }

.main-wrap {
  margin-left: 240px;
  background: var(--sf-bg);
}

.topbar {
  min-height: 58px;
  background: rgba(255, 255, 255, .94);
  border-bottom-color: var(--sf-border);
  box-shadow: 0 1px 0 rgba(16, 24, 40, .02);
}

.sf-date-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:var(--sf-radius-pill); background:var(--sf-bg); color:var(--sf-text-sub); font-size:12px; }
.sf-bell { position:relative; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:0; border-radius:11px; background:var(--sf-bg); color:var(--sf-text-sub); }
.sf-bell::after { position:absolute; top:-2px; right:-2px; width:7px; height:7px; content:''; border:2px solid #fff; border-radius:50%; background:#ff6b5b; }

.page {
  width: 100%;
  max-width: 1600px;
  padding: 24px 30px 40px;
  margin: 0;
}

.sf-dashboard-hero {
  position: relative;
  overflow: hidden;
  min-height: 140px;
  margin-bottom: 20px;
  padding: 26px 28px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(120deg, var(--sf-primary, #5b5bd6), var(--sf-hero-light, #9b8af0));
  box-shadow: 0 12px 28px rgba(91, 91, 214, .16);
}

.sf-dashboard-hero::before,
.sf-dashboard-hero::after {
  position: absolute;
  content: '';
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  pointer-events: none;
}

.sf-dashboard-hero::before { width: 150px; height: 150px; right: 22px; top: -70px; }
.sf-dashboard-hero::after { width: 120px; height: 120px; right: 58px; bottom: -72px; }

.sf-dashboard-hero > div { position: relative; z-index: 1; }
.sf-dashboard-hero h1 { margin: 0 0 5px; font-size: 22px; font-weight: 700; }
.sf-dashboard-hero p { margin: 0; font-size: 13px; opacity: .92; }

.sf-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 6px 13px;
  border-radius: var(--sf-radius-pill);
  color: #fff;
  background: rgba(255, 255, 255, .18);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.sf-hero-chip:hover { color: #fff; background: rgba(255, 255, 255, .28); }

.sf-quick-links {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  margin-bottom: 22px;
  padding: 0 0 4px;
  scrollbar-width: none;
}

.sf-quick-links::-webkit-scrollbar { display: none; }

.sf-quick-links a {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-pill);
  background: #fff;
  color: var(--sf-text);
  box-shadow: var(--sf-shadow-sm);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--sf-dur) var(--sf-ease), box-shadow var(--sf-dur) var(--sf-ease), color var(--sf-dur) var(--sf-ease);
}

.sf-quick-links a:hover { color: var(--sf-primary-700); box-shadow: var(--sf-shadow); transform: translateY(-2px); }
.sf-quick-links i { color: var(--sf-primary); }

.sf-dashboard-hero + .alert { display: none; }

.page > .row.g-3.mb-4 { margin-bottom: 24px !important; }
.page .stat-card { min-height: 124px; align-items: flex-start; flex-direction: column; gap: 12px; }
.page .stat-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 18px; }
.page .stat-label { font-size: 12px; }
.page .section-card { overflow: hidden; }
.page .section-head i { color: var(--sf-primary); }

@media (max-width: 991.98px) {
  .page { max-width: none; }
  .sf-dashboard-hero { border-radius: 18px; padding: 22px 20px; }
  .sf-dashboard-hero h1 { font-size: 20px; }
}

.stat-card,
.section-card,
.job-card,
.info-box {
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius);
  box-shadow: var(--sf-shadow-sm);
}

.stat-card {
  min-height: 78px;
  padding: 18px 20px;
  transition: box-shadow var(--sf-dur) var(--sf-ease), transform var(--sf-dur) var(--sf-ease);
}

.stat-card:hover,
.job-card:hover {
  box-shadow: var(--sf-shadow);
  transform: translateY(-4px) scale(1.01);
}

.stat-num {
  color: var(--sf-text);
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.section-head {
  padding: 15px 20px;
  background: var(--sf-primary-50);
  border-bottom: 1px solid var(--sf-border);
  color: var(--sf-text);
  font-size: 15px;
  font-weight: 600;
}

.table-responsive {
  border-radius: 0 0 var(--sf-radius) var(--sf-radius);
}

.table-sf {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--sf-border);
  margin-bottom: 0;
}

.table-sf th {
  background: var(--sf-bg);
  color: var(--sf-text-sub);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}

.table-sf td {
  color: var(--sf-text);
  font-size: 13px;
  vertical-align: middle;
}

.table-sf tbody tr {
  transition: background var(--sf-dur) var(--sf-ease);
}

.table-sf tbody tr:hover {
  background: var(--sf-bg);
}

.badge-pending,
.badge-inprog,
.badge-vendor,
.badge-done,
.badge-new,
.badge-urgent, .badge-orange, .badge-low,
.badge-room-success,
.badge-room-warning,
.badge-room-danger,
.badge-room-secondary,
.badge-sf {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  border-radius: var(--sf-radius-pill) !important;
  font-weight: 600;
  white-space: nowrap;
}

.badge-pending { background: var(--sf-pending-bg) !important; color: var(--sf-pending) !important; }
.badge-inprog { background: var(--sf-progress-bg) !important; color: var(--sf-progress) !important; }
.badge-vendor { background: var(--sf-vendor-bg) !important; color: var(--sf-vendor) !important; }
.badge-done { background: var(--sf-done-bg) !important; color: var(--sf-done) !important; }
.badge-urgent { background: var(--sf-danger-bg) !important; color: var(--sf-danger) !important; }
.badge-orange { background: #ffedd5 !important; color: #ea580c !important; border: 1px solid #fed7aa !important; }
.badge-low { background: #f1f5f9 !important; color: #475569 !important; border: 1px solid #e2e8f0 !important; }

.form-label {
  color: var(--sf-text);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.form-control,
.form-select {
  min-height: 40px;
  border: 1px solid var(--sf-border);
  border-radius: 10px;
  color: var(--sf-text);
  font-size: 14px;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--sf-primary);
  box-shadow: 0 0 0 3px rgba(91, 91, 214, .16);
}

.btn-primary-sf,
.btn-outline-sf,
.btn-sm-sf,
.btn-edit,
.btn-vendor,
.btn-del,
.btn-view,
.btn-update,
.btn-accept,
.btn-done {
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background var(--sf-dur) var(--sf-ease), color var(--sf-dur) var(--sf-ease), box-shadow var(--sf-dur) var(--sf-ease), transform var(--sf-dur) var(--sf-ease);
}

.btn-primary-sf {
  background: var(--sf-primary);
  border: 1px solid var(--sf-primary);
  color: #fff;
  min-height: 40px;
  padding: 8px 18px;
  font-weight: 600;
}

.btn-primary-sf:hover { background: var(--sf-primary-600); color: #fff; transform: translateY(-1px); }

.btn-outline-sf {
  background: #fff;
  border: 1px solid var(--sf-primary);
  color: var(--sf-primary-700);
  min-height: 40px;
  padding: 8px 16px;
  font-weight: 600;
}

.btn-outline-sf:hover { background: var(--sf-primary-50); color: var(--sf-primary-700); }

.btn-sm-sf { min-height: 30px; padding: 4px 10px; font-size: 12px; border: 1px solid transparent; }
.btn-edit, .btn-view, .btn-accept { background: var(--sf-primary-50); color: var(--sf-primary-700); }
.btn-vendor, .btn-update { background: var(--sf-vendor-bg); color: var(--sf-vendor); }
.sf-role-admin .btn-vendor {
  background: #6d28d9;
  border-color: #6d28d9;
  color: #fff;
  font-weight: 600;
}
.sf-role-admin .btn-vendor:hover,
.sf-role-admin .btn-vendor:focus-visible {
  background: #5b21b6;
  border-color: #5b21b6;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(109, 40, 217, .2);
}
.btn-del { background: var(--sf-danger-bg); color: var(--sf-danger); }
.btn-done { background: var(--sf-done-bg); color: var(--sf-done); }

.modal-content {
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-lg);
  box-shadow: var(--sf-shadow-lg);
  overflow: hidden;
}

.modal-header {
  min-height: 56px;
  background: var(--sf-primary-50);
  border-bottom-color: var(--sf-border);
}

.modal-footer { border-top-color: var(--sf-border); }

.sf-topbar-search {
  width: min(280px, 24vw);
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-pill);
  color: var(--sf-text);
  background: var(--sf-bg);
}

.sf-topbar-search:focus { outline: 2px solid var(--sf-primary-100); border-color: var(--sf-primary); }

.section-card a,
.page a { text-underline-offset: 3px; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--sf-primary);
  outline-offset: 2px;
}

.table-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  color: var(--sf-text-sub);
  font-size: 12px;
}

.table-pagination button {
  border: 1px solid var(--sf-border);
  border-radius: 8px;
  background: #fff;
  color: var(--sf-primary-700);
  padding: 5px 10px;
}

.table-pagination button:disabled { color: var(--sf-text-muted); cursor: not-allowed; }

@media (max-width: 991.98px) {
  .main-wrap { margin-left: 0 !important; }
  .page { padding: 18px 16px 82px !important; }
  .sf-topbar-search { display: none; }
  .section-head { padding: 13px 16px; }
  .modal-dialog { margin: 10px; }
}

@media (max-width: 575.98px) {
  .page { padding: 12px 10px 82px !important; }
  .stat-card { padding: 14px; }
  .stat-num { font-size: 24px; }
  .form-control, .form-select { min-height: 44px; }
  .btn-primary-sf, .btn-outline-sf { min-height: 44px; }
  .modal-dialog { margin: 0; max-width: 100%; min-height: 100%; }
  .modal-content { min-height: 100vh; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Keep the desktop workspace full-width; bottom tabs belong to mobile only. */
.sf-bottom-tabs { display: none; }

.sf-role-user .page { padding: 24px 30px 40px; }

/* User workspace: a calm, card-first layout matching the redesign reference. */
.sf-role-user .sf-stat-tile {
  display: flex;
  align-items: center;
  min-height: 126px;
  gap: 15px;
  padding: 18px;
  border-radius: 20px;
  color: inherit;
  text-decoration: none;
  transition: transform var(--sf-dur) var(--sf-ease), box-shadow var(--sf-dur) var(--sf-ease);
}

.sf-role-user .sf-stat-tile:hover { color: inherit; box-shadow: var(--sf-shadow); transform: translateY(-4px); }
.sf-role-user .sf-stat-tile .stat-icon { display:grid; width:44px; height:44px; flex:0 0 44px; place-items:center; border-radius:14px; background:rgba(255,255,255,.62); font-size:20px; }
.sf-role-user .sf-stat-tile .stat-num { display:block; color:inherit; font-size:29px; line-height:1.05; }
.sf-role-user .sf-stat-tile .stat-label { display:block; margin-top:5px; color:inherit; font-size:12px; font-weight:600; opacity:.85; }
.sf-role-user .sf-tile-blue { background:#e7f5fc; color:#0d6fa6; }
.sf-role-user .sf-tile-yellow { background:#fff4de; color:#94660c; }
.sf-role-user .sf-tile-purple { background:#efeafe; color:#5c3fcb; }
.sf-role-user .sf-tile-mint { background:#e1f8f4; color:#0b7b6e; }

.sf-role-user .sf-user-section { overflow:hidden; border:1px solid var(--sf-border); border-radius:20px; background:#fff; box-shadow:var(--sf-shadow-sm); }
.sf-role-user .sf-user-section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; border-bottom:1px solid var(--sf-border); background:linear-gradient(90deg, #f8fcfe, #fff); }
.sf-role-user .sf-section-eyebrow { display:block; margin-bottom:2px; color:var(--sf-primary); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.sf-role-user .sf-user-section h2 { margin:0; color:var(--sf-text); font-size:16px; font-weight:800; }
.sf-role-user .sf-user-section h2 i { color:var(--sf-primary); }
.sf-role-user .sf-see-all { display:inline-flex; align-items:center; gap:6px; color:var(--sf-primary-700); font-size:13px; font-weight:700; text-decoration:none; }
.sf-role-user .sf-ticket-list { display:flex; flex-direction:column; gap:10px; padding:14px; }
.sf-role-user .sf-ticket-card { display:flex; align-items:center; gap:14px; padding:14px; border:1px solid var(--sf-border); border-radius:16px; background:#fff; transition:transform var(--sf-dur) var(--sf-ease), box-shadow var(--sf-dur) var(--sf-ease); }
.sf-role-user .sf-ticket-card:hover { box-shadow:var(--sf-shadow); transform:translateY(-2px); }
.sf-role-user .sf-ticket-icon { display:grid; width:46px; height:46px; flex:0 0 46px; place-items:center; border-radius:14px; color:var(--sf-primary-700); background:var(--sf-primary-50); font-size:19px; }
.sf-role-user .sf-ticket-main { min-width:0; flex:1; }
.sf-role-user .sf-ticket-title { display:flex; align-items:baseline; gap:8px; min-width:0; color:var(--sf-text); }
.sf-role-user .sf-ticket-title strong { font-size:14px; }
.sf-role-user .sf-ticket-title span { overflow:hidden; color:var(--sf-text-sub); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.sf-role-user .sf-ticket-meta { display:flex; flex-wrap:wrap; gap:12px; margin-top:4px; color:var(--sf-text-muted); font-size:11.5px; }
.sf-role-user .sf-ticket-meta i { margin-right:4px; color:var(--sf-primary); }
.sf-role-user .sf-ticket-main p { display:-webkit-box; margin:5px 0 0; overflow:hidden; color:var(--sf-text-sub); font-size:12px; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:1; }
.sf-role-user .sf-ticket-actions { display:flex; flex:0 0 auto; align-items:center; gap:9px; }
.sf-role-user .sf-ticket-actions .btn-outline-sf { min-height:34px; padding:5px 10px; border-radius:10px; font-size:12px; text-decoration:none; }
.sf-role-user .sf-empty-state { display:flex; min-height:210px; align-items:center; justify-content:center; gap:7px; padding:32px; color:var(--sf-text-sub); text-align:center; flex-direction:column; }
.sf-role-user .sf-empty-state > i { display:grid; width:58px; height:58px; margin-bottom:5px; place-items:center; border-radius:18px; color:var(--sf-primary); background:var(--sf-primary-50); font-size:25px; }
.sf-role-user .sf-empty-state strong { color:var(--sf-text); font-size:15px; }
.sf-role-user .sf-empty-state span { font-size:13px; }
.sf-role-user .sf-empty-state .btn-primary-sf { margin-top:8px; text-decoration:none; }

/* Consistent cards, tables and form surfaces across the remaining User views. */
.sf-role-user .section-card { border-radius:18px; }
.sf-role-user .section-head { min-height:58px; padding:15px 20px; background:linear-gradient(90deg, var(--sf-primary-50), #fff); }
.sf-role-user .section-card .table-sf th { padding:12px 14px; background:#f8fbfd; }
.sf-role-user .section-card .table-sf td { padding:13px 14px; }
.sf-role-user .section-card .table-sf tbody tr:hover { background:var(--sf-primary-50); }
.sf-role-user .section-head form .form-control, .sf-role-user .section-head form .form-select { min-height:34px; border-radius:10px; }
.sf-role-user .section-card .p-4 { padding:24px !important; }
.sf-role-user .section-card .p-3 { padding:18px !important; }
.sf-role-user .form-control, .sf-role-user .form-select { min-height:44px; border-radius:11px; background:#fbfdff; }
.sf-role-user textarea.form-control { min-height:110px; }
.sf-role-user .form-text { margin-top:6px; color:var(--sf-text-sub); font-size:12px; }
.sf-role-user .btn-primary-sf, .sf-role-user .btn-outline-sf { border-radius:11px; }

@media (max-width: 767.98px) {
  .sf-role-user .sf-ticket-card { align-items:flex-start; flex-wrap:wrap; }
  .sf-role-user .sf-ticket-main { min-width:calc(100% - 60px); }
  .sf-role-user .sf-ticket-actions { width:100%; justify-content:space-between; margin-left:60px; }
  .sf-role-user .sf-user-section-head { align-items:flex-start; padding:16px; }
  .sf-role-user .sf-ticket-list { padding:10px; }
}

@media (max-width: 575.98px) {
  .sf-role-user .sf-stat-tile { min-height:105px; padding:14px; gap:10px; border-radius:16px; }
  .sf-role-user .sf-stat-tile .stat-icon { width:38px; height:38px; flex-basis:38px; border-radius:12px; font-size:17px; }
  .sf-role-user .sf-stat-tile .stat-num { font-size:24px; }
  .sf-role-user .sf-ticket-actions { margin-left:0; }
  .sf-role-user .sf-ticket-main { min-width:calc(100% - 60px); }
}

/* Admin workspace: dense enough for operations, with the same friendly visual language. */
.sf-role-admin .page { max-width:1600px; }
.sf-role-admin .admin-dashboard-page .stat-card {
  min-height:126px;
  border:0;
  border-radius:20px;
  box-shadow:none;
}
.sf-role-admin .admin-dashboard-page .stat-card:nth-child(1) { background:#efeafe; }
.sf-role-admin .admin-dashboard-page .col-6:nth-child(2) .stat-card { background:#fff4de; }
.sf-role-admin .admin-dashboard-page .col-6:nth-child(3) .stat-card { background:#e7f5fc; }
.sf-role-admin .admin-dashboard-page .col-6:nth-child(4) .stat-card { background:#e1f8f4; }
.sf-role-admin .admin-dashboard-page .stat-card .stat-icon { background:rgba(255,255,255,.65) !important; }
.sf-role-admin .admin-dashboard-page .stat-card:hover { transform:translateY(-4px) scale(1.01); box-shadow:0 12px 24px rgba(75,55,145,.12); }
.sf-role-admin .admin-dashboard-page .section-card { border-radius:20px; }
.sf-role-admin .admin-dashboard-page .section-head { min-height:61px; padding:17px 20px; background:linear-gradient(90deg, #f5f2ff, #fff); }
.sf-role-admin .admin-dashboard-page .bar-wrap { gap:15px; }
.sf-role-admin .admin-dashboard-page .bar-row { gap:12px; }
.sf-role-admin .admin-dashboard-page .bar-label { width:104px; color:var(--sf-text); font-weight:600; text-align:left; }
.sf-role-admin .admin-dashboard-page .bar-track { height:10px; background:#f0edfa; }
.sf-role-admin .admin-dashboard-page .bar-val { color:var(--sf-primary-700); font-weight:700; }

.sf-role-admin .section-card { border-radius:18px; }
.sf-role-admin .section-head { min-height:57px; padding:15px 20px; background:linear-gradient(90deg, var(--sf-primary-50), #fff); }
.sf-role-admin .section-card .table-sf th { padding:12px 14px; background:#faf9ff; color:var(--sf-text-sub); }
.sf-role-admin .section-card .table-sf td { padding:13px 14px; }
.sf-role-admin .section-card .table-sf tbody tr:hover { background:#f8f6ff; }
.sf-role-admin .section-card .p-4 { padding:24px !important; }
.sf-role-admin .section-card .p-3 { padding:18px !important; }
.sf-role-admin .form-control, .sf-role-admin .form-select { min-height:44px; border-radius:11px; background:#fdfcff; }
.sf-role-admin textarea.form-control { min-height:110px; }
.sf-role-admin .form-text { margin-top:6px; color:var(--sf-text-sub); font-size:12px; }
.sf-role-admin .btn-primary-sf, .sf-role-admin .btn-outline-sf { border-radius:11px; }
.sf-role-admin .ticket-hero { border-radius:20px; border-color:#e6defd; background:linear-gradient(135deg, #f7f4ff, #fff); }
.sf-role-admin .info-item, .sf-role-admin .repair-meta-item { border-radius:12px; background:#f8f6ff; }
.sf-role-admin .table-pagination { padding:14px 18px; background:#fcfbff; }

@media (max-width: 767.98px) {
  .sf-role-admin .admin-dashboard-page .bar-label { width:82px; font-size:12px; }
}

/* Technician workspace: keep active jobs and their priority immediately visible. */
.sf-role-technician .page { max-width:1600px; }
.sf-role-technician .technician-dashboard-page .stat-card { min-height:126px; border:0; border-radius:20px; box-shadow:none; }
.sf-role-technician .technician-dashboard-page .col-6:nth-child(1) .stat-card { background:#fff4de; }
.sf-role-technician .technician-dashboard-page .col-6:nth-child(2) .stat-card { background:#e7f5fc; }
.sf-role-technician .technician-dashboard-page .col-6:nth-child(3) .stat-card { background:#e1f8f4; }
.sf-role-technician .technician-dashboard-page .col-6:nth-child(4) .stat-card { background:#efeafe; }
.sf-role-technician .technician-dashboard-page .stat-card .stat-icon { background:rgba(255,255,255,.66) !important; }
.sf-role-technician .technician-dashboard-page .stat-card:hover { transform:translateY(-4px) scale(1.01); box-shadow:0 12px 24px rgba(18,184,166,.15); }
.sf-role-technician .technician-dashboard-page .section-card { border-radius:20px; }
.sf-role-technician .technician-dashboard-page .section-head { min-height:61px; padding:17px 20px; background:linear-gradient(90deg, #edfdf8, #fff); }
.sf-role-technician .technician-dashboard-page .job-card { position:relative; padding:18px; overflow:hidden; border:1px solid #d5eee8; border-radius:16px; background:linear-gradient(135deg, #fff, #f5fdfb); }
.sf-role-technician .technician-dashboard-page .job-card::before { position:absolute; top:0; bottom:0; left:0; width:4px; content:''; background:var(--sf-primary); }
.sf-role-technician .technician-dashboard-page .job-card:hover { box-shadow:0 10px 20px rgba(18,184,166,.12); transform:translateY(-2px); }
.sf-role-technician .technician-dashboard-page .job-card-title { color:var(--sf-text); font-size:15px; }
.sf-role-technician .technician-dashboard-page .job-card-sub { margin-top:4px; color:var(--sf-text-sub); }

.sf-role-technician .section-card { border-radius:18px; }
.sf-role-technician .section-head { min-height:57px; padding:15px 20px; background:linear-gradient(90deg, var(--sf-primary-50), #fff); }
.sf-role-technician .section-card .table-sf th { padding:12px 14px; background:#f7fdfb; color:var(--sf-text-sub); }
.sf-role-technician .section-card .table-sf td { padding:13px 14px; }
.sf-role-technician .section-card .table-sf tbody tr:hover { background:#effbf7; }
.sf-role-technician .section-card .p-4 { padding:24px !important; }
.sf-role-technician .section-card .p-3 { padding:18px !important; }
.sf-role-technician .form-control, .sf-role-technician .form-select { min-height:44px; border-radius:11px; background:#fbfefd; }
.sf-role-technician textarea.form-control { min-height:110px; }
.sf-role-technician .form-text { margin-top:6px; color:var(--sf-text-sub); font-size:12px; }
.sf-role-technician .btn-primary-sf, .sf-role-technician .btn-outline-sf { border-radius:11px; }
.sf-role-technician .ticket-hero { border-radius:20px; border-color:#d5eee8; background:linear-gradient(135deg, #effbf7, #fff); }
.sf-role-technician .info-item, .sf-role-technician .repair-meta-item { border-radius:12px; background:#f1fcf8; }
.sf-role-technician .table-pagination { padding:14px 18px; background:#fbfefd; }

@media (max-width: 767.98px) {
  .sf-role-technician .technician-dashboard-page .job-card { padding:16px; }
}

/* Vendor workspace: make assignments, progress and costs easy to scan. */
.sf-role-vendor .page { max-width:1600px; }
.sf-role-vendor .vendor-dashboard-page > .alert { display:none; }
.sf-role-vendor .vendor-dashboard-page > .row.g-3 > .col-6:first-child,
.sf-role-vendor .vendor-dashboard-page > .section-card.mb-4 { display:none; }
@media (min-width: 1200px) {
  .sf-role-vendor .vendor-dashboard-page > .row.g-3 > .col-6 { flex:0 0 33.333333%; max-width:33.333333%; }
}
.sf-role-vendor .vendor-dashboard-page .stat-card { min-height:126px; border:0; border-radius:20px; box-shadow:none; }
.sf-role-vendor .vendor-dashboard-page .col-6:nth-child(1) .stat-card { background:#fff4de; }
.sf-role-vendor .vendor-dashboard-page .col-6:nth-child(2) .stat-card { background:#e7f5fc; }
.sf-role-vendor .vendor-dashboard-page .col-6:nth-child(3) .stat-card { background:#e1f8f4; }
.sf-role-vendor .vendor-dashboard-page .col-6:nth-child(4) .stat-card { background:#ffeae7; }
.sf-role-vendor .vendor-dashboard-page .stat-card .stat-icon { background:rgba(255,255,255,.66) !important; }
.sf-role-vendor .vendor-dashboard-page .stat-card:hover { transform:translateY(-4px) scale(1.01); box-shadow:0 12px 24px rgba(255,140,61,.16); }
.sf-role-vendor .vendor-dashboard-page .section-card { border-radius:20px; }
.sf-role-vendor .vendor-dashboard-page .section-head { min-height:61px; padding:17px 20px; background:linear-gradient(90deg, #fff6ef, #fff); }
.sf-role-vendor .vendor-dashboard-page .section-card.mb-4 .p-3 > div { position:relative; overflow:hidden; border:1px solid #f8ddca !important; border-radius:16px !important; background:linear-gradient(135deg, #fff, #fffaf6) !important; }
.sf-role-vendor .vendor-dashboard-page .section-card.mb-4 .p-3 > div::before { position:absolute; top:0; bottom:0; left:0; width:4px; content:''; background:var(--sf-primary); }
.sf-role-vendor .vendor-dashboard-page .section-card.mb-4 .p-3 > div:hover { box-shadow:0 10px 20px rgba(255,140,61,.12); transform:translateY(-2px); }

.sf-role-vendor .section-card, .sf-role-procurement .section-card { border-radius:18px; }
.sf-role-vendor .section-head, .sf-role-procurement .section-head { min-height:57px; padding:15px 20px; background:linear-gradient(90deg, var(--sf-primary-50), #fff); }
.sf-role-vendor .section-card .table-sf th, .sf-role-procurement .section-card .table-sf th { padding:12px 14px; background:#fffaf6; color:var(--sf-text-sub); }
.sf-role-vendor .section-card .table-sf td, .sf-role-procurement .section-card .table-sf td { padding:13px 14px; }
.sf-role-vendor .section-card .table-sf tbody tr:hover, .sf-role-procurement .section-card .table-sf tbody tr:hover { background:#fff7f0; }
.sf-role-vendor .section-card .p-4, .sf-role-procurement .section-card .p-4 { padding:24px !important; }
.sf-role-vendor .section-card .p-3, .sf-role-procurement .section-card .p-3 { padding:18px !important; }
.sf-role-vendor .form-control, .sf-role-vendor .form-select, .sf-role-procurement .form-control, .sf-role-procurement .form-select { min-height:44px; border-radius:11px; background:#fffdfb; }
.sf-role-vendor textarea.form-control, .sf-role-procurement textarea.form-control { min-height:110px; }
.sf-role-vendor .form-text, .sf-role-procurement .form-text { margin-top:6px; color:var(--sf-text-sub); font-size:12px; }
.sf-role-vendor .btn-primary-sf, .sf-role-vendor .btn-outline-sf, .sf-role-procurement .btn-primary-sf, .sf-role-procurement .btn-outline-sf { border-radius:11px; }
.sf-role-vendor .info-box, .sf-role-procurement .info-box { border-radius:14px; border-color:#f8ddca; background:#fff8f2; }
.sf-role-vendor .ticket-hero, .sf-role-procurement .ticket-hero { border-radius:20px; border-color:#f8ddca; background:linear-gradient(135deg, #fff7f0, #fff); }
.sf-role-vendor .table-pagination, .sf-role-procurement .table-pagination { padding:14px 18px; background:#fffdfb; }

@media (max-width: 767.98px) {
  .sf-role-vendor .vendor-dashboard-page .section-card.mb-4 .p-3 > div { padding:16px !important; }
}

.sf-role-user .main-wrap {
  margin-left: 240px;
  min-width: 0;
}

.sf-role-user .page > .section-card,
.sf-role-user .page > .row {
  width: 100%;
}

.sf-role-user .table-responsive {
  width: 100%;
}

@media (max-width: 991.98px) {
  .sf-bottom-tabs {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--sf-border);
    box-shadow: 0 -4px 16px rgba(16, 24, 40, .06);
  }

  .sf-bottom-tabs a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 5px 4px;
    color: var(--sf-text-sub);
    font-size: 11px;
    line-height: 1.2;
    text-decoration: none;
  }

  .sf-bottom-tabs a i { font-size: 19px; }
  .sf-bottom-tabs a.is-active { color: var(--sf-primary); font-weight: 600; }
  .sf-role-user .main-wrap { margin-left: 0 !important; }
  .sf-role-user .page { padding: 16px 14px 82px !important; }
}

/* Balanced column widths for User list views. */
.sf-role-user .user-dashboard-table,
.sf-role-user .user-history-table,
.sf-role-user .user-track-table,
.sf-role-user .user-rooms-table {
  width: 100%;
  table-layout: fixed;
}

.sf-role-user .user-dashboard-table th:nth-child(1),
.sf-role-user .user-dashboard-table td:nth-child(1) { width: 10%; }
.sf-role-user .user-dashboard-table th:nth-child(2),
.sf-role-user .user-dashboard-table td:nth-child(2) { width: 19%; }
.sf-role-user .user-dashboard-table th:nth-child(3),
.sf-role-user .user-dashboard-table td:nth-child(3) { width: 16%; }
.sf-role-user .user-dashboard-table th:nth-child(4),
.sf-role-user .user-dashboard-table td:nth-child(4) { width: 20%; }
.sf-role-user .user-dashboard-table th:nth-child(5),
.sf-role-user .user-dashboard-table td:nth-child(5) { width: 10%; }
.sf-role-user .user-dashboard-table th:nth-child(6),
.sf-role-user .user-dashboard-table td:nth-child(6) { width: 14%; }
.sf-role-user .user-dashboard-table th:nth-child(7),
.sf-role-user .user-dashboard-table td:nth-child(7) { width: 11%; }

.sf-role-user .user-history-table th:nth-child(1),
.sf-role-user .user-history-table td:nth-child(1) { width: 8%; }
.sf-role-user .user-history-table th:nth-child(2),
.sf-role-user .user-history-table td:nth-child(2) { width: 11%; }
.sf-role-user .user-history-table th:nth-child(3),
.sf-role-user .user-history-table td:nth-child(3) { width: 15%; }
.sf-role-user .user-history-table th:nth-child(4),
.sf-role-user .user-history-table td:nth-child(4) { width: 15%; }
.sf-role-user .user-history-table th:nth-child(5),
.sf-role-user .user-history-table td:nth-child(5) { width: 16%; }
.sf-role-user .user-history-table th:nth-child(6),
.sf-role-user .user-history-table td:nth-child(6) { width: 9%; }
.sf-role-user .user-history-table th:nth-child(7),
.sf-role-user .user-history-table td:nth-child(7) { width: 12%; }
.sf-role-user .user-history-table th:nth-child(8),
.sf-role-user .user-history-table td:nth-child(8) { width: 7%; }
.sf-role-user .user-history-table th:nth-child(9),
.sf-role-user .user-history-table td:nth-child(9) { width: 7%; }

.sf-role-user .user-track-table th:nth-child(1),
.sf-role-user .user-track-table td:nth-child(1) { width: 10%; }
.sf-role-user .user-track-table th:nth-child(2),
.sf-role-user .user-track-table td:nth-child(2) { width: 13%; }
.sf-role-user .user-track-table th:nth-child(3),
.sf-role-user .user-track-table td:nth-child(3) { width: 20%; }
.sf-role-user .user-track-table th:nth-child(4),
.sf-role-user .user-track-table td:nth-child(4) { width: 19%; }
.sf-role-user .user-track-table th:nth-child(5),
.sf-role-user .user-track-table td:nth-child(5) { width: 12%; }
.sf-role-user .user-track-table th:nth-child(6),
.sf-role-user .user-track-table td:nth-child(6) { width: 14%; }
.sf-role-user .user-track-table th:nth-child(7),
.sf-role-user .user-track-table td:nth-child(7) { width: 12%; }

.sf-role-user .user-rooms-table th:nth-child(1),
.sf-role-user .user-rooms-table td:nth-child(1) { width: 9%; }
.sf-role-user .user-rooms-table th:nth-child(2),
.sf-role-user .user-rooms-table td:nth-child(2) { width: 15%; }
.sf-role-user .user-rooms-table th:nth-child(3),
.sf-role-user .user-rooms-table td:nth-child(3) { width: 8%; }
.sf-role-user .user-rooms-table th:nth-child(4),
.sf-role-user .user-rooms-table td:nth-child(4) { width: 15%; }
.sf-role-user .user-rooms-table th:nth-child(5),
.sf-role-user .user-rooms-table td:nth-child(5) { width: 16%; }
.sf-role-user .user-rooms-table th:nth-child(6),
.sf-role-user .user-rooms-table td:nth-child(6) { width: 10%; }
.sf-role-user .user-rooms-table th:nth-child(7),
.sf-role-user .user-rooms-table td:nth-child(7) { width: 9%; }
.sf-role-user .user-rooms-table th:nth-child(8),
.sf-role-user .user-rooms-table td:nth-child(8) { width: 18%; }

.sf-role-user .user-dashboard-table td,
.sf-role-user .user-history-table td,
.sf-role-user .user-track-table td,
.sf-role-user .user-rooms-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-role-user .user-dashboard-table td:last-child,
.sf-role-user .user-history-table td:last-child,
.sf-role-user .user-track-table td:last-child,
.sf-role-user .user-rooms-table td:last-child {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .sf-role-user .user-dashboard-table,
  .sf-role-user .user-history-table,
  .sf-role-user .user-track-table,
  .sf-role-user .user-rooms-table {
    min-width: 640px;
  }
}