@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400&display=swap');

/* ==========================================
   DESIGN TOKENS & ROOT VARIABLES
   ========================================== */
:root {
  /* Premium Light Sky Blue & Modern Slate Palette */
  --bg-primary: #F1F5F9; /* Clean modern slate-100 background */
  --bg-card: #FFFFFF;
  --text-main: #0F172A; /* Deep slate-900 for absolute contrast and readability */
  --text-muted: #475569; /* Slate-600 for high readability secondary text */
  --accent: #3FA2F6; /* Vibrant premium Light Sky Blue */
  --accent-light: #E0F2FE; /* Softest sky blue-50 highlight background */
  --border: rgba(63, 162, 246, 0.15);
  --border-light: rgba(63, 162, 246, 0.08);
  --shadow-sm: 0 2px 8px rgba(63, 162, 246, 0.05);
  --shadow-md: 0 10px 30px rgba(63, 162, 246, 0.08);
  --shadow-lg: 0 20px 50px rgba(63, 162, 246, 0.12);

  /* Rounded Corner Tokens (approx 18%) */
  --border-radius-lg: 18px;
  --border-radius-md: 12px;
  --border-radius-sm: 8px;

  /* Typography - Unified Roboto Font Family */
  --font-serif: 'Roboto', sans-serif;
  --font-sans: 'Roboto', sans-serif;

  /* Transitions */
  --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark Theme Variables */
body.dark-theme-crm {
  --bg-primary: #0F172A; /* Deep slate-900 */
  --bg-card: #1E293B; /* Slate-800 */
  --text-main: #F8FAFC; /* Slate-50 */
  --text-muted: #94A3B8; /* Slate-400 */
  --accent: #38BDF8; /* Radiant Light Sky Blue for dark mode */
  --accent-light: #0C4A6E; /* Slate-800 deep sky highlight */
  --border: rgba(56, 189, 248, 0.25);
  --border-light: rgba(56, 189, 248, 0.12);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* ==========================================
   RESET & BASE STYLES
   ========================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-primary);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

body {
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  line-height: 1.5;
  transition: background-color 0.4s ease, color 0.4s ease;
}

input, button {
  font-family: inherit;
  font-size: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* Fine Editorial Architectural Gridlines */
.grid-lines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  opacity: 0.35;
}

.grid-line {
  border-right: 1px solid var(--border);
  height: 100%;
}

.grid-line:last-child {
  border-right: none;
}

/* Animations & Reveals */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================
   1. LOGIN PORTAL STYLE
   ========================================== */
.login-wrapper {
  position: relative;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  background: radial-gradient(circle at 10% 20%, var(--accent-light) 0%, transparent 40%),
              radial-gradient(circle at 90% 80%, var(--accent-light) 0%, transparent 40%);
}

.login-card {
  width: 100%;
  max-width: 460px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 3.5rem 3rem;
  box-shadow: var(--shadow-lg);
  border-radius: var(--border-radius-lg);
  position: relative;
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

.login-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.login-logo {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--text-main);
  margin-bottom: 0.5rem;
}

.login-header h2 {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.login-header p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Form Styles */
.form-group-login {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group-login label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 1rem;
  width: 18px;
  height: 18px;
  fill: var(--text-muted);
  opacity: 0.7;
}

.input-wrapper input {
  width: 100%;
  padding: 0.9rem 1rem 0.9rem 2.8rem;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  color: var(--text-main);
  border-radius: var(--border-radius-md);
  outline: none;
  transition: var(--transition-fast);
}

.input-wrapper input:focus {
  border-color: var(--accent);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(188, 158, 108, 0.15);
}

.btn-toggle-password {
  position: absolute;
  right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eye-icon {
  width: 18px;
  height: 18px;
  fill: var(--text-muted);
  opacity: 0.6;
  transition: var(--transition-fast);
}

.btn-toggle-password:hover .eye-icon,
.btn-toggle-password.active .eye-icon {
  fill: var(--accent);
  opacity: 1;
}

.btn-submit-login {
  width: 100%;
  padding: 1.1rem;
  background: var(--text-main);
  color: #FFFFFF;
  border-radius: var(--border-radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid var(--text-main);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
  margin-top: 1rem;
}

.btn-submit-login:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-submit-login:active {
  transform: translateY(0);
}

.login-footer {
  text-align: center;
  margin-top: 2.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

/* ==========================================
   2. MAIN APPLICATION PORTAL LAYOUT
   ========================================== */
.app-root-container {
  display: flex;
  width: 100vw;
  height: 100vh;
  position: relative;
  z-index: 5;
  background: var(--bg-primary);
}

/* LEFT NAVIGATION SIDEBAR */
.portal-sidebar {
  width: 280px;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 2rem 1.5rem;
  z-index: 20;
  transition: var(--transition-smooth);
}

.sidebar-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2.5rem;
  padding-left: 0;
}

.logo-text {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--text-main);
  line-height: 1.2;
}

.logo-sub {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 0.2rem;
}

.sidebar-user-wrapper:hover .sidebar-user-dropdown {
  display: block !important;
  animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sidebar-user-badge {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-md);
  transition: var(--transition-fast);
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 1px;
  box-shadow: var(--shadow-sm);
}

.sidebar-user-badge .info h4 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.sidebar-user-badge .info span {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Sidebar Menu Navigation */
.sidebar-menu {
  flex: 1;
}

.sidebar-menu ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-radius: var(--border-radius-sm);
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.9rem;
  transition: var(--transition-fast);
  cursor: pointer;
}

.menu-item svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: var(--transition-fast);
}

.menu-item:hover, .menu-item.active {
  color: var(--text-main);
  background: var(--accent-light);
}

.menu-item.active {
  font-weight: 600;
  border-left: 3px solid var(--accent);
  padding-left: calc(1.2rem - 3px);
}

/* Sidebar Footer */
.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}

.footer-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.2rem;
  border-radius: var(--border-radius-sm);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  width: 100%;
  text-align: left;
  transition: var(--transition-fast);
}

.footer-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.footer-btn:hover {
  background: var(--bg-primary);
  color: var(--text-main);
}

.btn-logout-app-portal:hover {
  color: #EF4444;
  background: rgba(239, 68, 68, 0.05);
}

/* RIGHT MAIN WORKSPACE */
.portal-main-workspace {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* DASHBOARD COMMON ELEMENTS */
.dashboard-wrapper {
  width: 100%;
  height: 100%;
  display: none; /* Controlled via JS switch */
}

.dashboard-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* Topbar Header */
.dashboard-topbar {
  height: 80px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 3rem;
  flex-shrink: 0;
}

.topbar-title-group h2 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text-main);
}

.breadcrumbs {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
  font-weight: 500;
}

.breadcrumbs span.portal-breadcrumb-home {
  cursor: pointer;
  transition: var(--transition-fast);
}

.breadcrumbs span.portal-breadcrumb-home:hover {
  color: var(--accent);
}

.breadcrumbs .sep {
  margin: 0 0.4rem;
  opacity: 0.5;
}

.breadcrumbs .active-crumb {
  color: var(--accent);
}

.user-profile-badge-inline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.profile-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}

.profile-info-desktop {
  display: flex;
  flex-direction: column;
}

.profile-info-desktop .name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
}

/* Student Portal Dropdown Menu Styles */
.student-profile-dropdown:hover .student-dropdown-menu {
  display: flex !important;
}

.student-profile-dropdown:hover {
  background: var(--bg-primary);
  border-color: var(--border) !important;
}

.student-profile-dropdown:hover svg {
  transform: rotate(180deg);
  fill: var(--accent) !important;
}

.student-profile-dropdown {
  border: 1px solid transparent;
}

.profile-info-desktop .role {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* ==========================================
   3. CHAT CANVAS SYSTEM (TELEGRAM LAYOUT)
   ========================================== */
.chat-canvas-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  background: var(--bg-primary);
}

/* Chat Sidebar (Left Threads List) */
.chat-sidebar {
  width: 320px;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.chat-sidebar-search {
  padding: 1.5rem;
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-light);
}

.chat-sidebar-search .search-icon {
  position: absolute;
  left: 2.2rem;
  width: 16px;
  height: 16px;
  fill: var(--text-muted);
  opacity: 0.6;
}

.chat-sidebar-search input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  color: var(--text-main);
  border-radius: 20px;
  outline: none;
  font-size: 0.85rem;
  transition: var(--transition-fast);
}

.chat-sidebar-search input:focus {
  border-color: var(--accent);
  background: var(--bg-card);
}

.chat-threads-list {
  flex: 1;
  overflow-y: auto;
}

.chat-thread-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: var(--transition-fast);
}

.chat-thread-item:hover {
  background: var(--bg-primary);
}

.chat-thread-item.active {
  background: var(--accent-light);
}

.chat-thread-details {
  flex: 1;
  min-width: 0;
}

.chat-thread-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.25rem;
}

.chat-thread-header .title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-thread-header .time {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
}

.chat-thread-preview {
  display: flex;
  justify-content: space-between;
}

.chat-thread-preview .message {
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Unread Message Threads & Badges */
.chat-thread-item.unread .chat-thread-header .title {
  font-weight: 700 !important;
  color: #000000 !important;
}

.chat-thread-item.unread .chat-thread-preview .message {
  font-weight: 700 !important;
  color: #111827 !important; /* Elegant deep-black */
}

.unread-badge {
  background: #EF4444;
  color: #ffffff !important;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  margin-left: 8px;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
  animation: badgeAppear 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes badgeAppear {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Chat Window Area (Right) */
.chat-window {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-primary);
}

.chat-window-header {
  height: 70px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  flex-shrink: 0;
  z-index: 10;
}

.active-chat-info {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.avatar-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--text-main);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: var(--shadow-sm);
}

.active-chat-details h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
}

.active-chat-details span {
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 500;
}

.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: var(--transition-fast);
}

.header-icon-btn:hover {
  background: var(--bg-primary);
  color: var(--text-main);
}

.header-icon-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Inline Message Search Bar */
.chat-search-bar-inline {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  padding: 0 2rem;
  gap: 1rem;
  z-index: 15;
  animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.chat-search-bar-inline .search-icon {
  width: 18px;
  height: 18px;
  fill: var(--text-muted);
}

.chat-search-bar-inline input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  color: var(--text-main);
  font-size: 0.9rem;
}

.btn-close-inline-search {
  font-size: 1.5rem;
  color: var(--text-muted);
  transition: var(--transition-fast);
}

.btn-close-inline-search:hover {
  color: var(--text-main);
}

/* Messages Container */
.chat-messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: radial-gradient(circle at center, var(--border-light) 0%, transparent 80%);
}

.chat-bubble-row {
  display: flex;
  gap: 1rem;
  max-width: 75%;
}

.chat-bubble-row.sent {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-bubble-row.received {
  align-self: flex-start;
}

.chat-bubble {
  padding: 1rem 1.2rem;
  border-radius: 12px;
  position: relative;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  line-height: 1.5;
}

.chat-bubble-row {
  position: relative;
}

.chat-bubble-row:hover .chat-bubble-actions {
  display: flex !important;
}

.chat-bubble-row.sent .chat-bubble {
  background: var(--accent-light);
  color: var(--text-main);
  border-top-right-radius: 0;
  border: 1px solid rgba(188, 158, 108, 0.2);
}

.chat-bubble-row.received .chat-bubble {
  background: var(--bg-card);
  color: var(--text-main);
  border-top-left-radius: 0;
  border: 1px solid var(--border);
}

.sender-name {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
}

.chat-bubble .content {
  font-size: 0.9rem;
  word-break: break-word;
}

.time-stamp {
  font-size: 0.65rem;
  color: var(--text-muted);
  align-self: flex-end;
  margin-top: 0.2rem;
  font-weight: 500;
}

.highlight-match {
  background: rgba(212, 175, 55, 0.3);
  color: var(--text-main);
  padding: 0 2px;
  border-radius: 2px;
}

/* Chat Input Bar */
.chat-input-bar {
  height: 80px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 2rem;
  gap: 1rem;
  flex-shrink: 0;
}

.chat-input-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: var(--transition-fast);
}

.chat-input-btn:hover {
  background: var(--bg-primary);
  color: var(--text-main);
}

.chat-input-btn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.chat-input-bar input {
  flex: 1;
  padding: 0.9rem 1.5rem;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  color: var(--text-main);
  border-radius: 24px;
  outline: none;
  font-size: 0.9rem;
  transition: var(--transition-fast);
}

.chat-input-bar input:focus {
  border-color: var(--accent);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(188, 158, 108, 0.1);
}

.btn-send-message {
  background: var(--text-main);
  color: #FFFFFF;
}

.btn-send-message:hover {
  background: var(--accent);
  color: #FFFFFF;
}

/* Emoji Picker Popup */
.chat-emoji-picker-popup {
  position: absolute;
  bottom: 85px;
  left: 2rem;
  width: 320px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.chat-emoji-grid button:hover {
  transform: scale(1.2);
  transition: transform 0.15s ease;
}

/* ==========================================
   4. STAFF CREATION DASHBOARD (ADMIN PANEL)
   ========================================== */
.users-page-wrapper .dashboard-canvas {
  flex: 1;
  padding: 3rem;
  overflow-y: auto;
}

.users-split-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 3rem;
  max-width: 1400px;
  margin: 0 auto;
}

.user-form-card, .user-list-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  padding: 1.5rem 2rem;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

.user-form-card h3, .user-list-card h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text-main);
  letter-spacing: 1px;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 1rem;
}

.user-form-card form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.user-form-card input {
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  color: var(--text-main);
  border-radius: var(--border-radius-md);
  outline: none;
  transition: var(--transition-fast);
}

.user-form-card input:focus {
  border-color: var(--accent);
  background: var(--bg-card);
}

/* Unified High-Quality Premium Input & Form Styles for Modals */
#studentForm input,
#studentForm select,
#studentForm textarea,
#sourceStudentModal input,
#sourceStudentModal select,
#sourceStudentModal textarea,
#crmCustomerModal input,
#crmCustomerModal select,
#crmCustomerModal textarea,
#profileForm input {
  width: 100%;
  padding: 0.8rem 1.2rem;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  color: var(--text-main);
  border-radius: var(--border-radius-md);
  outline: none;
  font-family: inherit;
  font-size: 0.9rem;
  transition: var(--transition-fast);
}

#studentForm input:focus,
#studentForm select:focus,
#studentForm textarea:focus,
#sourceStudentModal input:focus,
#sourceStudentModal select:focus,
#sourceStudentModal textarea:focus,
#crmCustomerModal input:focus,
#crmCustomerModal select:focus,
#crmCustomerModal textarea:focus,
#profileForm input:focus {
  border-color: var(--accent);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(188, 158, 108, 0.15);
}

#studentForm select,
#sourceStudentModal select,
#crmCustomerModal select {
  height: 44px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23526E8D'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.5rem;
  padding-right: 2.5rem;
}

/* Financial-table style list with floating rounded rows */
.mini-table-container {
  overflow-x: auto;
}

.financial-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  text-align: left;
}

.financial-table th {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  padding: 1rem;
  border-bottom: none;
  text-align: center;
}

.financial-table td {
  padding: 1.2rem 1rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-main);
  vertical-align: middle;
  background: var(--bg-primary);
  transition: var(--transition-fast);
  text-align: center;
}

.financial-table td:first-child {
  border-left: 1px solid var(--border);
  border-top-left-radius: var(--border-radius-md);
  border-bottom-left-radius: var(--border-radius-md);
}

.financial-table td:last-child {
  border-right: 1px solid var(--border);
  border-top-right-radius: var(--border-radius-md);
  border-bottom-right-radius: var(--border-radius-md);
}

.financial-table tr:hover td {
  background: var(--accent-light);
  border-color: var(--accent);
}

.font-mono {
  font-family: monospace;
}

/* Status Badges */
.crm-badge {
  display: inline-flex;
  padding: 0.18rem 0.55rem;
  border-radius: 10px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.badge-danghoc {
  background: rgba(188, 158, 108, 0.15);
  color: var(--accent);
}

.badge-waiting {
  background: rgba(245, 166, 35, 0.15);
  color: #D97706;
}

.badge-selected {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
}

.badge-processing {
  background: rgba(82, 110, 141, 0.15);
  color: var(--text-muted);
}

.btn-delete-staff:hover {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #DC2626 !important;
}

/* ==========================================
   5. TOAST SYSTEM STYLING
   ========================================== */
.toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 9999;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  min-width: 320px;
  max-width: 450px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  border-left: 4px solid var(--text-main);
  padding: 1.2rem 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border-radius: var(--border-radius-md);
  animation: slideInLeft 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: var(--transition-fast);
}

.toast-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.toast-icon svg {
  width: 100%;
  height: 100%;
}

.toast-message {
  flex: 1;
  font-size: 0.85rem;
  color: var(--text-main);
  font-weight: 500;
  line-height: 1.4;
}

.toast-close {
  font-size: 1.2rem;
  color: var(--text-muted);
  opacity: 0.6;
  transition: var(--transition-fast);
}

.toast-close:hover {
  opacity: 1;
  color: var(--text-main);
}

/* Toast Color States */
.toast-success {
  border-left-color: #10B981;
}
.toast-success svg {
  fill: #10B981;
}

.toast-error {
  border-left-color: #EF4444;
}
.toast-error svg {
  fill: #EF4444;
}

.toast-warning {
  border-left-color: #F5A623;
}
.toast-warning svg {
  fill: #F5A623;
}

.toast-info {
  border-left-color: var(--accent);
}
.toast-info svg {
  fill: var(--accent);
}

.toast-fade-out {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
}

/* Custom Webkit Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ==========================================
   ANIMATIONS
   ========================================== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(100%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes slideDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Hacks */
@media (max-width: 1024px) {
  .users-split-grid {
    grid-template-columns: 1fr;
  }
  .portal-sidebar {
    width: 80px;
    padding: 2rem 0.5rem;
    align-items: center;
  }
  .sidebar-logo .logo-sub,
  .sidebar-user-badge .info,
  .menu-item span,
  .footer-btn span {
    display: none;
  }
  .sidebar-logo {
    align-items: center;
    padding: 0;
  }
  .logo-text {
    font-size: 1.3rem;
  }
  .sidebar-user-badge {
    padding: 0.5rem;
    justify-content: center;
  }
  .menu-item {
    justify-content: center;
    padding: 1rem;
  }
  .footer-btn {
    justify-content: center;
    padding: 0.9rem;
  }
}

@media (max-width: 768px) {
  .app-root-container {
    flex-direction: column;
  }
  .portal-sidebar {
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.5rem;
  }
  .portal-sidebar::-webkit-scrollbar { display: none; }
  .sidebar-logo, .sidebar-user-badge {
    display: none;
  }
  .sidebar-menu {
    flex-shrink: 0;
  }
  .sidebar-menu ul {
    flex-direction: row;
    gap: 0.25rem;
  }
  .menu-item {
    flex-shrink: 0;
  }
  /* Giữ lại Đổi giao diện / Đăng xuất, gộp vào cùng hàng thay vì ẩn hoàn toàn */
  .sidebar-footer {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    gap: 0.25rem;
    margin-top: 0;
    margin-left: auto;
    padding-top: 0;
    border-top: none;
    border-left: 1px solid var(--border);
    padding-left: 0.5rem;
  }
  .chat-sidebar {
    display: none; /* Hide threads list on mobile for full chat canvas */
  }
  .dashboard-topbar {
    padding: 0 1.25rem;
    height: 64px;
  }
  .profile-info-desktop {
    display: none;
  }
}

@media (max-width: 480px) {
  .login-wrapper { padding: 1rem; }
  .login-card { padding: 2.25rem 1.5rem; }
  .modal-overlay { padding: 0.75rem !important; }
  .modal-overlay > .login-card { padding: 1.75rem 1.25rem !important; max-height: 96vh !important; }
}

/* Topbar User Profile Hover Dropdown */
.topbar-user-wrapper:hover .topbar-user-dropdown {
  display: block !important;
  animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Tap-to-open fallback for touch devices (hover không hoạt động ổn định trên mobile) */
.topbar-user-wrapper.open .topbar-user-dropdown {
  display: block !important;
  animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.topbar-user-wrapper:hover .user-profile-badge-inline {
  background: var(--accent-light);
}

.topbar-user-dropdown .footer-btn:hover {
  background: var(--bg-primary) !important;
  color: var(--text-main) !important;
}

.topbar-user-dropdown .footer-btn.btn-logout-app-portal:hover {
  background: rgba(239, 68, 68, 0.05) !important;
  color: #EF4444 !important;
}

/* Student Search Input Focus Effect */
#studentSearchInput:focus {
  border-color: var(--accent) !important;
  background: var(--bg-card) !important;
  box-shadow: 0 0 0 3px rgba(188, 158, 108, 0.15) !important;
}

/* ==========================================
   4. STUDENT PORTAL SPECIFIC STYLING (PALAIS SYSTEM)
   ========================================== */
.student-header-navbar {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.85) !important;
  transition: var(--transition-smooth);
}
body.dark-theme-crm .student-header-navbar {
  background: rgba(22, 22, 26, 0.85) !important;
}

.student-nav-item {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: var(--transition-fast);
}

.student-nav-item:hover {
  color: var(--text-main);
}

.student-nav-item.active {
  color: var(--text-main) !important;
  font-weight: 600;
}

.student-tab-content {
  display: none;
  animation: fadeInStudentTab 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.student-tab-content.active {
  display: block;
}

/* Responsive Header adjustments */
@media (max-width: 900px) {
  .student-header-navbar {
    height: auto !important;
    padding: 1rem !important;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .student-nav-menu {
    order: 3;
    width: 100%;
    justify-content: center !important;
    gap: 1.25rem !important;
    height: auto !important;
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
    margin-top: 0.25rem;
  }
  .student-nav-item {
    padding: 0.5rem 0 !important;
    font-size: 0.85rem !important;
  }
}


/* Timeline Customization */
.milestone-timeline {
  margin-top: 1.5rem;
}

.milestone-dot {
  transition: var(--transition-smooth);
}

.milestone-dot.completed {
  box-shadow: 0 0 0 4px rgba(188, 158, 108, 0.2);
}

.milestone-dot.active {
  box-shadow: 0 0 0 6px rgba(188, 158, 108, 0.3);
  animation: pulseGold 2s infinite;
}

@keyframes pulseGold {
  0% {
    box-shadow: 0 0 0 0px rgba(188, 158, 108, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(188, 158, 108, 0);
  }
  100% {
    box-shadow: 0 0 0 0px rgba(188, 158, 108, 0);
  }
}

/* Asymmetric Blog Grid & Elegant Card zoom */
.blog-card img {
  transition: var(--transition-smooth);
}

.blog-card:hover img {
  transform: scale(1.03);
}

/* Animations */
@keyframes fadeInStudentTab {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* VietQR simulator style */
.student-nav-menu button {
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  outline: none;
}

/* Chat bubble actions toolbar & new message features */
.chat-bubble-actions {
  display: none;
  align-items: center;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 4px 6px;
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  z-index: 100;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: auto;
}

.chat-bubble-row.sent .chat-bubble-actions {
  left: -4px;
  transform: translate(-100%, -50%);
}

.chat-bubble-row.received .chat-bubble-actions {
  right: -4px;
  transform: translate(100%, -50%);
}

/* Invisible hover bridge to prevent toolbar from disappearing when cursor crosses the gap */
.chat-bubble-actions::after {
  content: '';
  position: absolute;
  top: -10px;
  bottom: -10px;
  width: 25px;
  background: transparent;
  z-index: -1;
}

.chat-bubble-row.sent .chat-bubble-actions::after {
  right: -15px;
}

.chat-bubble-row.received .chat-bubble-actions::after {
  left: -15px;
}

.chat-action-btn {
  background: none;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.chat-action-btn:hover {
  background: var(--bg-primary);
  color: var(--text-main);
  transform: scale(1.1);
}

.chat-action-btn.btn-recall-action:hover {
  color: var(--accent);
  background: var(--accent-light);
}

.chat-action-btn.btn-delete-action:hover {
  color: #EF4444;
  background: rgba(239, 68, 68, 0.1);
}

.chat-action-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.chat-bubble.recalled {
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px dashed var(--border) !important;
  color: var(--text-muted) !important;
  font-style: italic;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.8rem 1.2rem;
  border-radius: var(--border-radius-md);
  font-size: 0.85rem;
}

.chat-bubble.recalled .recalled-icon {
  width: 14px;
  height: 14px;
  opacity: 0.6;
  fill: currentColor;
  display: inline-block;
}

.chat-bubble .forwarded-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--accent);
  font-style: italic;
  margin-bottom: 4px;
  font-weight: 600;
  opacity: 0.9;
}

.chat-bubble .forwarded-tag svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
}

/* Premium Glassmorphic Modal for Forwarding */
.premium-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(10px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.premium-modal-glass {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  width: 90%;
  max-width: 460px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUpModal 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.premium-modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.premium-modal-header h3 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-main);
  margin: 0;
}

.premium-modal-header .btn-close-modal {
  background: none;
  border: none;
  font-size: 1.8rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.premium-modal-header .btn-close-modal:hover {
  color: var(--text-main);
}

.premium-modal-body {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
}

.premium-modal-body .search-wrapper input {
  width: 100%;
  padding: 0.75rem 1.2rem;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  color: var(--text-main);
  border-radius: 20px;
  outline: none;
  font-size: 0.85rem;
  transition: var(--transition-fast);
}

.premium-modal-body .search-wrapper input:focus {
  border-color: var(--accent);
  background: var(--bg-card);
}

.forward-targets-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

.forward-target-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: var(--transition-fast);
  background: var(--bg-primary);
}

.forward-target-item:hover {
  background: var(--accent-light);
  border-color: var(--accent);
}

.forward-target-item .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.forward-target-item .name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.forward-target-item .role {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-left: auto;
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes slideUpModal {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Premium custom context menu */
.premium-context-menu {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-lg);
  min-width: 150px;
  padding: 4px 0;
  backdrop-filter: blur(10px);
  animation: fadeInFast 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.context-menu-content {
  display: flex;
  flex-direction: column;
}

.context-item {
  background: none;
  border: none;
  padding: 10px 14px;
  text-align: left;
  font-size: 0.85rem;
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition-fast);
  width: 100%;
}

.context-item:hover {
  background: var(--accent-light);
  color: var(--text-main);
}

.context-item svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  opacity: 0.8;
}

@keyframes fadeInFast {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-5px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.btn-connect-friend {
  background: var(--accent);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: var(--border-radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  margin-left: auto;
}

.btn-connect-friend:hover {
  background: var(--text-main);
  transform: scale(1.05);
}

.badge-connected-friend {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  margin-left: auto;
}

/* Thread Menu dropdown styling */
.thread-menu-btn {
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.chat-thread-item:hover .thread-menu-btn,
.thread-menu-btn.active {
  opacity: 1;
}

.thread-menu-btn:hover {
  background: var(--border-light);
  color: var(--text-main);
}

.btn-delete-thread:hover {
  background: rgba(239, 68, 68, 0.08) !important;
}

/* Friend Requests Badge */
.friend-badge {
  position: absolute !important;
  top: -5px !important;
  right: -5px !important;
  background: #EF4444 !important;
  color: white !important;
  border-radius: 50% !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid var(--bg-card) !important;
  box-shadow: var(--shadow-sm) !important;
  z-index: 99999 !important;
}

/* ==========================================================================
   5. ACADEMIC SCORECARD SYSTEM
   ========================================================================== */
.scorecard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.scorecard-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  padding: 1.5rem 2rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: var(--transition-smooth);
}

.scorecard-kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.scorecard-kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.scorecard-kpi-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.scorecard-kpi-info {
  display: flex;
  flex-direction: column;
}

.scorecard-kpi-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}

.scorecard-kpi-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
}

.scorecard-kpi-subtext {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* Scorecard Tab Toggler */
.scorecard-toggle-group {
  display: inline-flex;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 4px;
  border-radius: 30px;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
}

.scorecard-toggle-btn {
  padding: 0.6rem 1.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: 25px;
  transition: var(--transition-fast);
  cursor: pointer;
  border: none;
  background: none;
}

.scorecard-toggle-btn:hover {
  color: var(--text-main);
}

.scorecard-toggle-btn.active {
  background: var(--accent);
  color: #FFFFFF;
  box-shadow: 0 4px 10px rgba(63, 162, 246, 0.2);
}

/* Scorecard Cards List */
.scorecard-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.scorecard-card-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2.5rem;
  transition: var(--transition-smooth);
  animation: fadeInFast 0.3s ease;
}

.scorecard-card-item:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.scorecard-item-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-right: 1px solid var(--border-light);
  padding-right: 2rem;
  text-align: center;
}

.scorecard-item-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.5rem;
}

.scorecard-item-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.scorecard-average-badge {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 6px solid var(--accent-light);
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
}

.scorecard-card-item:hover .scorecard-average-badge {
  border-color: var(--accent);
  transform: scale(1.05);
}

.scorecard-avg-val {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1;
}

.scorecard-avg-lbl {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 0.15rem;
}

.scorecard-item-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Skills list progress bars */
.score-bars-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 2rem;
  margin-bottom: 1.25rem;
}

.score-bar-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.score-bar-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
}

.score-bar-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.score-bar-progress {
  height: 8px;
  background: var(--bg-primary);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.score-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  background: var(--accent);
}

.score-bar-value {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
}

.scorecard-feedback {
  background: var(--bg-primary);
  border-left: 3px solid var(--accent);
  padding: 0.85rem 1.2rem;
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-main);
}

.scorecard-feedback strong {
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.2rem;
  letter-spacing: 0.5px;
}

/* Responsive adjustment */
@media (max-width: 900px) {
  .scorecard-card-item {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .scorecard-item-left {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
    padding-right: 0;
    padding-bottom: 1.5rem;
  }
  
  .score-bars-container {
    grid-template-columns: 1fr;
  }
}

.scorecard-empty {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: var(--border-radius-lg);
  color: var(--text-muted);
}

.scorecard-empty svg {
  width: 48px;
  height: 48px;
  fill: var(--text-muted);
  opacity: 0.4;
  margin-bottom: 1rem;
}

.scorecard-empty h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.5rem;
}

/* ==========================================
   HRM MODULE STYLES
   ========================================== */

/* HRM Sub-tabs Navigation */
.hrm-subtabs {
  display: flex;
  gap: 0;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 0 2rem;
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.hrm-subtabs::-webkit-scrollbar {
  display: none;
}

.hrm-subtab {
  padding: 1rem 1.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  border: none;
  background: none;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
  position: relative;
  letter-spacing: 0.3px;
}

.hrm-subtab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: var(--accent);
  border-radius: 3px 3px 0 0;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hrm-subtab:hover {
  color: var(--text-main);
  background: var(--accent-light);
}

.hrm-subtab.active {
  color: var(--accent);
}

.hrm-subtab.active::after {
  width: 70%;
}

/* HRM Tab Content Area */
.hrm-tab-content {
  flex: 1;
  overflow-y: auto;
  padding: 2rem;
  animation: hrmFadeIn 0.35s ease;
}

@keyframes hrmFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* HRM Section Headers */
.hrm-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.hrm-section-header > div {
  flex-wrap: wrap;
}

.hrm-section-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: 0.5px;
}

/* HRM Overview Stats Bar */
.hrm-overview-bar {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-md);
  padding: 1.1rem 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.overview-stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.2rem;
}

.overview-num {
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1;
}

.overview-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.2px;
}

.overview-divider {
  width: 1px;
  height: 36px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 0.5rem;
}

/* HRM KPI Section */
.hrm-kpi-section {
  margin-bottom: 1.25rem;
}

.hrm-kpi-section .metric-card-header { margin-bottom: 0.75rem; }

/* HRM KPI Grid */
.hrm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

/* KPI Card v2 */
.kpi-card-v2 {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  transition: var(--transition-fast);
}

.kpi-card-v2:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.kpi-v2-accent {
  height: 3px;
  width: 100%;
}

.kpi-v2-body {
  padding: 1.1rem;
}

.kpi-v2-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}

.kpi-v2-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kpi-v2-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.kpi-v2-pct {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
}

.kpi-v2-dept {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.kpi-v2-count {
  display: flex;
  align-items: baseline;
  gap: 0.05rem;
  margin-bottom: 0.1rem;
}

.kpi-v2-active-num {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.1;
}

.kpi-v2-total-num {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 500;
}

.kpi-v2-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  display: block;
  margin-bottom: 0.8rem;
}

.kpi-v2-progress {
  height: 4px;
  background: var(--bg-card);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.8rem;
}

.kpi-v2-progress-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.kpi-v2-tags {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.kpi-v2-tag {
  font-size: 0.67rem;
  font-weight: 600;
  padding: 0.18rem 0.5rem;
  border-radius: 20px;
}

/* Staff Section Card */
.hrm-staff-section .hrm-filter-bar { margin-top: 0.1rem; }
.hrm-staff-section .metric-card-header { margin-bottom: 0.75rem; }

/* HRM Staff Table */
.hrm-staff-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 2rem;
}

.hrm-filter-bar {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.hrm-filter-bar input,
.hrm-filter-bar select {
  padding: 0.6rem 1rem;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.85rem;
  outline: none;
  transition: var(--transition-fast);
  height: 40px;
}

.hrm-filter-bar input { flex: 1; min-width: 200px; }
.hrm-filter-bar select { min-width: 160px; }

.hrm-filter-bar input:focus,
.hrm-filter-bar select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(63, 162, 246, 0.1);
}

/* HRM Table shared styles */
.hrm-table {
  width: 100%;
  border-collapse: collapse;
}

.hrm-table thead tr {
  border-bottom: 2px solid var(--border);
}

.hrm-table th {
  padding: 0.75rem 0.6rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-align: left;
}

.hrm-table td {
  padding: 0.85rem 0.6rem;
  font-size: 0.85rem;
  color: var(--text-main);
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

.hrm-table tbody tr {
  transition: var(--transition-fast);
}

.hrm-table tbody tr:hover {
  background: var(--accent-light);
}

.hrm-table tbody tr:last-child td {
  border-bottom: none;
}

/* Staff row avatar */
.hrm-staff-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hrm-staff-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  color: #fff;
  flex-shrink: 0;
}

.hrm-staff-name {
  font-weight: 600;
  color: var(--text-main);
  font-size: 0.88rem;
}

.hrm-staff-email {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* HRM Badges */
.hrm-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.hrm-badge-active   { background: rgba(16,185,129,0.12); color: #059669; }
.hrm-badge-probation{ background: rgba(99,102,241,0.12); color: #6366F1; }
.hrm-badge-onleave  { background: rgba(245,158,11,0.12); color: #D97706; }
.hrm-badge-inactive { background: rgba(239,68,68,0.1);   color: #DC2626; }

.hrm-emp-code {
  display: inline-block;
  font-size: 0.78rem; font-weight: 700; font-family: 'Courier New', monospace;
  color: #6366F1; background: #EEF2FF;
  padding: 0.2rem 0.55rem; border-radius: 6px;
  letter-spacing: 0.04em;
}

.hrm-work-type-tag {
  display: inline-block;
  padding: 0.22rem 0.65rem; border-radius: 20px;
  font-size: 0.72rem; font-weight: 600;
}
.hrm-badge-planning { background: rgba(139,92,246,0.12); color: #8B5CF6; }
.hrm-badge-inprogress { background: rgba(63,162,246,0.12); color: #3FA2F6; }
.hrm-badge-review { background: rgba(245,158,11,0.12); color: #F59E0B; }
.hrm-badge-completed { background: rgba(16,185,129,0.12); color: #10B981; }
.hrm-badge-pending { background: rgba(245,158,11,0.12); color: #F59E0B; }
.hrm-badge-approved { background: rgba(16,185,129,0.12); color: #10B981; }
.hrm-badge-rejected { background: rgba(239,68,68,0.1); color: #EF4444; }

/* Action buttons in tables */
.hrm-action-btn {
  border: none;
  background: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  color: var(--text-muted);
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hrm-action-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.hrm-action-btn:hover { background: var(--accent-light); color: var(--accent); }
.hrm-action-btn.danger:hover { background: rgba(239,68,68,0.08); color: #EF4444; }
.hrm-action-btn.success:hover { background: rgba(16,185,129,0.1); color: #10B981; }

/* ========== HRM Projects ========== */
.hrm-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.25rem;
}

.hrm-project-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  animation: hrmFadeIn 0.35s ease;
}

.hrm-project-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.hrm-project-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.hrm-project-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.4;
}

.hrm-project-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hrm-project-progress {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.hrm-project-progress-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 600;
}

.hrm-project-progress-label { color: var(--text-muted); }
.hrm-project-progress-value { color: var(--accent); }

.hrm-project-progress-bar {
  height: 6px;
  background: var(--bg-primary);
  border-radius: 3px;
  overflow: hidden;
}

.hrm-project-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), #38BDF8);
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.hrm-project-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-light);
}

.hrm-project-meta-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
}

.hrm-project-meta-item svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  opacity: 0.7;
}

.hrm-project-leader-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========== HRM Payments ========== */
.hrm-payments-layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 2rem;
  align-items: start;
}

.hrm-payment-form-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.hrm-payment-form-card h3 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-main);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
  letter-spacing: 0.5px;
}

.hrm-payment-history-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.hrm-payment-history-card h3 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-main);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
  letter-spacing: 0.5px;
}

.hrm-payment-amount {
  font-weight: 700;
  color: var(--text-main);
  font-size: 0.9rem;
}

/* HRM Empty State */
.hrm-empty-state {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--text-muted);
}

.hrm-empty-state svg {
  width: 48px;
  height: 48px;
  fill: var(--text-muted);
  opacity: 0.3;
  margin-bottom: 1rem;
}

.hrm-empty-state h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.3rem;
}

.hrm-empty-state p {
  font-size: 0.85rem;
}

/* ========== HRM Modal Styles ========== */
.hrm-modal-form .form-group-login {
  margin-bottom: 1rem;
}

.hrm-modal-form input,
.hrm-modal-form select,
.hrm-modal-form textarea {
  padding: 0.7rem 1rem;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-main);
  font-family: inherit;
  font-size: inherit;
  width: 100%;
  outline: none;
  transition: var(--transition-fast);
}

.hrm-modal-form input:focus,
.hrm-modal-form select:focus,
.hrm-modal-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(63, 162, 246, 0.1);
}

.hrm-modal-form textarea {
  resize: vertical;
  min-height: 70px;
}

.hrm-modal-form select {
  height: 42px;
  cursor: pointer;
}

.hrm-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* ========== HRM Mobile Responsive ========== */
@media (max-width: 768px) {
  .hrm-tab-content {
    padding: 1.25rem;
  }

  .hrm-subtabs {
    padding: 0 1rem;
  }

  .hrm-subtab {
    padding: 0.85rem 1rem;
    font-size: 0.8rem;
  }

  .hrm-kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .hrm-kpi-card {
    padding: 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .hrm-kpi-value {
    font-size: 1.3rem;
  }

  .hrm-staff-container {
    padding: 1rem;
    overflow-x: auto;
  }

  .hrm-filter-bar {
    flex-direction: column;
  }

  .hrm-filter-bar input,
  .hrm-filter-bar select {
    min-width: unset;
    width: 100%;
  }

  .hrm-projects-grid {
    grid-template-columns: 1fr;
  }

  .hrm-payments-layout {
    grid-template-columns: 1fr;
  }

  .hrm-form-row {
    grid-template-columns: 1fr;
  }

  .hrm-section-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .hrm-kpi-grid {
    grid-template-columns: 1fr;
  }

  .hrm-tab-content {
    padding: 1rem;
  }
}

/* ==========================================
   HRM EMPLOYEE PROFILE VIEW
   ========================================== */

.hrm-profile-view {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: hrmFadeIn 0.35s ease;
}

/* Profile Top Navigation Bar */
.hrm-profile-topbar {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 0 1.5rem;
  gap: 0.5rem;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.hrm-profile-topbar::-webkit-scrollbar { display: none; }

.hrm-back-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.9rem 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  border: none;
  background: none;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
  border-right: 1px solid var(--border);
  margin-right: 0.25rem;
}

.hrm-back-btn:hover { color: var(--text-main); }

.hrm-back-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

.hrm-profile-nav-tabs {
  display: flex;
  flex: 1;
  gap: 0;
}

.hrm-ptab {
  padding: 1rem 1.1rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  border: none;
  background: none;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
  position: relative;
}

.hrm-ptab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hrm-ptab:hover { color: var(--text-main); background: var(--accent-light); }

.hrm-ptab.active {
  color: var(--accent);
  font-weight: 600;
}

.hrm-ptab.active::after { width: 75%; }

.hrm-profile-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  flex-shrink: 0;
  padding-left: 0.75rem;
}

.hrm-btn-icon-action {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 500;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-main);
}

.hrm-btn-icon-action:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}

.hrm-btn-icon-action svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.hrm-btn-excel {
  background: #F0FDF4;
  border-color: #86EFAC;
  color: #15803D;
}
.hrm-btn-excel:hover {
  background: #16A34A;
  border-color: #16A34A;
  color: #fff;
}

.hrm-btn-primary {
  background: #2563EB;
  border-color: #2563EB;
  color: #fff;
}
.hrm-btn-primary:hover {
  background: #1D4ED8;
  border-color: #1D4ED8;
  color: #fff;
}

/* Tab Panels */
.hrm-ptab-panel {
  display: none;
  flex: 1;
  padding: 1.5rem 2rem;
  overflow-y: auto;
  animation: hrmFadeIn 0.3s ease;
}

.hrm-ptab-panel.active { display: block; }

/* 3-Column Profile Grid */
.hrm-profile-grid {
  display: grid;
  grid-template-columns: 270px 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}

/* Left: Profile Info Card */
.hrm-profile-info-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-md);
  padding: 1.5rem;
}

.profile-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
  gap: 0.6rem;
}

.profile-avatar-lg {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.profile-name-block h2 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.2rem;
}

.profile-emp-code {
  display: block;
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.profile-positions {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 0.65rem;
}

.profile-status-badge {
  display: inline-block;
  padding: 0.28rem 0.85rem;
  border-radius: 20px;
  font-size: 0.73rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.profile-status-badge.active-badge { background: #DCFCE7; color: #16A34A; border-color: #BBF7D0; }
.profile-status-badge.leave-badge { background: #FEF3C7; color: #D97706; border-color: #FDE68A; }
.profile-status-badge.inactive-badge { background: #FEE2E2; color: #DC2626; border-color: #FECACA; }

body.dark-theme-crm .profile-status-badge.active-badge { background: rgba(22,163,74,0.15); border-color: rgba(22,163,74,0.3); }
body.dark-theme-crm .profile-status-badge.leave-badge { background: rgba(217,119,6,0.15); border-color: rgba(217,119,6,0.3); }
body.dark-theme-crm .profile-status-badge.inactive-badge { background: rgba(220,38,38,0.15); border-color: rgba(220,38,38,0.3); }

.profile-info-rows { display: flex; flex-direction: column; }

.profile-info-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border-light);
}

.profile-info-row:last-child { border-bottom: none; }

.info-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  min-width: 105px;
  flex-shrink: 0;
}

.info-val {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-main);
  flex: 1;
  word-break: break-word;
}

.sp-resume-input {
  flex: 1;
  padding: 0.35rem 0.65rem;
  font-size: 0.82rem;
  font-family: inherit;
  color: var(--text-main);
  background: var(--bg-secondary, #F7F4EF);
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  min-width: 0;
}
.sp-resume-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(168,139,88,0.12);
  background: var(--bg-primary);
}

.info-val.link {
  color: var(--accent);
  text-decoration: none;
}

.info-val.link:hover { text-decoration: underline; }

/* Middle + Right columns */
.hrm-profile-mid-col,
.hrm-profile-right-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Metric Cards */
.hrm-metric-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-md);
  padding: 1.25rem;
}

.metric-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border-light);
}

.metric-card-header h4 {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main);
}

/* ── Work Overview stat icons ── */
.pstat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px;
  margin-right: 0.45rem; flex-shrink: 0;
}
.pstat-kpi   { font-weight: 700; }
.pstat-att   { font-weight: 700; }
.pstat-salary{ font-weight: 700; }

/* ── Achievements Card ── */
.ach-count-badge {
  background: #6366F1; color: #fff;
  font-size: 0.65rem; font-weight: 700;
  border-radius: 20px; padding: 1px 8px;
  margin-left: auto;
}
.achievements-list { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.25rem 0; }
.achievement-item {
  display: flex; align-items: flex-start; gap: 0.5rem;
  font-size: 0.82rem; color: var(--text-main);
  background: #F8F9FF; border-radius: 8px;
  padding: 0.5rem 0.75rem; border-left: 3px solid #6366F1;
}
.ach-star { font-size: 0.85rem; flex-shrink: 0; }
.achievement-empty {
  font-size: 0.8rem; color: var(--text-muted);
  text-align: center; padding: 1.2rem 0; font-style: italic;
}

/* ── HR Score Card ── */
.hr-score-display { display: flex; justify-content: center; padding: 0.75rem 0 0.5rem; }
.hr-score-circle-wrap {
  position: relative; width: 140px; height: 140px;
  display: flex; align-items: center; justify-content: center;
}
.hr-score-svg { position: absolute; top: 0; left: 0; width: 140px; height: 140px; }
.hr-score-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; line-height: 1.2;
}
.hr-score-val { font-size: 2.2rem; font-weight: 800; color: var(--text-main); }
.hr-score-sub { font-size: 0.72rem; color: var(--text-muted); }
.hr-score-grade {
  font-size: 1rem; font-weight: 800; margin-top: 0.1rem;
  letter-spacing: 1px;
}
.hr-score-breakdown {
  display: flex; flex-direction: column; gap: 0.75rem;
  margin: 0.75rem 0 0.5rem; padding: 0.75rem 0;
  border-top: 1px solid var(--border-light);
}
.hr-score-row { display: flex; align-items: center; gap: 0.6rem; }
.hr-factor-label {
  font-size: 0.78rem; color: var(--text-muted);
  width: 90px; flex-shrink: 0;
}
.hr-factor-weight { font-size: 0.68rem; color: var(--text-muted); }
.hr-bar-track {
  flex: 1; height: 7px; background: #F3F4F6;
  border-radius: 4px; overflow: hidden;
}
.hr-bar-fill { height: 100%; border-radius: 4px; transition: width 1s ease; }
.hr-factor-val {
  font-size: 0.78rem; font-weight: 700; color: var(--text-main);
  width: 36px; text-align: right; flex-shrink: 0;
}
.hr-score-note {
  font-size: 0.78rem; font-weight: 600; text-align: center;
  padding: 0.5rem 0.75rem; border-radius: 8px;
  background: rgba(99,102,241,0.07);
  margin-top: 0.25rem;
}

/* ── SP Income Card ── */
.sp-income-card .sp-income-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 0 1rem;
  gap: 0.3rem;
}
.sp-income-amount {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text-main, #1A1A1A);
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}
.sp-income-unit {
  font-size: 0.78rem;
  color: var(--color-text-muted, #6B6A67);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sp-income-divider {
  height: 1px;
  background: var(--color-border, #E8E5DF);
  margin: 0 0 0.85rem;
}
.sp-income-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
}
.sp-income-meta-label { color: var(--color-text-muted, #6B6A67); }
.sp-income-meta-val {
  font-weight: 600;
  color: var(--color-text-main, #1A1A1A);
  background: rgba(168,139,88,0.09);
  padding: 0.2rem 0.65rem;
  border-radius: 20px;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}

/* ── SP Contract Card ── */
.sp-contract-card .sp-contract-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sp-contract-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-border, #E8E5DF);
  font-size: 0.83rem;
}
.sp-contract-row:last-child { border-bottom: none; }
.sp-ctr-label { color: var(--color-text-muted, #6B6A67); }
.sp-ctr-val {
  font-weight: 600;
  color: var(--color-text-main, #1A1A1A);
  text-align: right;
  max-width: 55%;
}

/* ══════════════════════════════════════
   STUDENT PROFILE TAB
══════════════════════════════════════ */
.stp-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 900px) { .stp-grid { grid-template-columns: 1fr; } }
.stp-col { display: flex; flex-direction: column; gap: 1.25rem; }

/* Hero card */
.stp-hero-card { padding-bottom: 1.25rem; }
.stp-avatar-wrap { display: flex; align-items: center; gap: 1rem; padding: 0.25rem 0 0.5rem; }
.stp-avatar {
  width: 64px; height: 64px; font-size: 1.4rem; font-weight: 700;
  flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.stp-hero-info { display: flex; flex-direction: column; gap: 0.35rem; }
.stp-name { font-size: 1.15rem; font-weight: 600; color: var(--color-text-main,#1A1A1A); margin: 0; }
.stp-code { font-size: 0.75rem; font-family: monospace; color: var(--color-accent,#A88B58); font-weight: 700; }

/* Notes */
.stp-notes {
  font-size: 0.83rem; color: var(--color-text-main,#1A1A1A);
  white-space: pre-wrap; line-height: 1.6; margin: 0;
  padding-top: 0.25rem;
}

/* Roadmap */
.stp-roadmap { display: flex; flex-direction: column; gap: 0; padding: 0.25rem 0; }
.stp-roadmap-step {
  display: flex; align-items: flex-start; gap: 0.85rem;
  padding: 0.6rem 0; position: relative;
}
.stp-roadmap-step:not(:last-child)::before {
  content: ''; position: absolute; left: 10px; top: 28px;
  width: 2px; bottom: 0; background: var(--color-border,#E8E5DF);
}
.stp-step-dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  border: 3px solid var(--color-border,#E8E5DF);
  background: var(--color-bg,#FAF8F5);
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px; position: relative; z-index: 1;
  transition: background 0.3s, border-color 0.3s;
}
.stp-step-dot.done   { background: #10B981; border-color: #10B981; }
.stp-step-dot.active { background: var(--color-accent,#A88B58); border-color: var(--color-accent,#A88B58); }
.stp-step-dot svg { width: 10px; height: 10px; fill: #fff; }
.stp-step-body { flex: 1; }
.stp-step-label { font-size: 0.82rem; font-weight: 600; color: var(--color-text-main,#1A1A1A); }
.stp-step-sub   { font-size: 0.72rem; color: var(--color-text-muted,#6B6A67); margin-top: 1px; }
.stp-step-tag {
  display: inline-block; margin-top: 3px;
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  padding: 0.15rem 0.55rem; border-radius: 20px; letter-spacing: 0.04em;
}
.stp-step-tag.done   { background: rgba(16,185,129,0.1); color: #10B981; }
.stp-step-tag.active { background: rgba(168,139,88,0.12); color: var(--color-accent,#A88B58); }
.stp-step-tag.upcoming { background: var(--color-border,#E8E5DF); color: var(--color-text-muted,#6B6A67); }

/* Semester badge */
.stp-semester-badge {
  font-size: 0.95rem; font-weight: 700;
  color: var(--color-accent,#A88B58);
  padding: 0.75rem 0; text-align: center;
  letter-spacing: 0.02em;
}
.stp-sem-tag {
  font-size: 0.75rem; font-weight: 700; padding: 0.2rem 0.65rem;
  border-radius: 20px; background: rgba(168,139,88,0.09);
  color: var(--color-accent,#A88B58);
}

/* Flight card */
.stp-flight-card { text-align: center; }
.stp-flight-body { padding: 1rem 0 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.stp-flight-icon { font-size: 2.5rem; line-height: 1; }
.stp-flight-date { font-size: 1.1rem; font-weight: 700; color: var(--color-text-main,#1A1A1A); }
.stp-flight-countdown {
  font-size: 0.8rem; color: var(--color-text-muted,#6B6A67);
  background: rgba(168,139,88,0.08); padding: 0.3rem 1rem;
  border-radius: 20px; font-weight: 600;
}

/* ══════════════════════════════════════
   SƠ ĐỒ (ORG CHART) PAGE
══════════════════════════════════════ */
.orgchart-page {
  padding: 1.75rem 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Page header */
.oc-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border, #E8E5DF);
}
.oc-page-title {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.55rem;
  font-weight: 400;
  color: var(--color-text-main, #1A1A1A);
  letter-spacing: 0.5px;
  margin: 0 0 0.15rem;
}
.oc-page-sub {
  font-size: 0.82rem;
  color: var(--color-text-muted, #6B6A67);
  margin: 0;
}

/* Dept filter tabs */
.oc-dept-bar {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.oc-dept-btn {
  padding: 0.35rem 1rem;
  border-radius: 99px;
  border: 1px solid var(--color-border, #E8E5DF);
  background: transparent;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-muted, #6B6A67);
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}
.oc-dept-btn:hover { background: var(--color-border, #E8E5DF); color: var(--color-text-main, #1A1A1A); }
.oc-dept-btn.active {
  background: var(--color-accent, #A88B58);
  border-color: var(--color-accent, #A88B58);
  color: #fff;
  font-weight: 600;
}

/* Staff grid */
.oc-staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 1.25rem;
}

/* Staff card */
.oc-staff-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--color-border, #E8E5DF);
  border-radius: 18px;
  padding: 1.5rem 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  cursor: default;
}
.oc-staff-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.1);
}

/* Photo frame */
.oc-photo-ring {
  padding: 3px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-accent, #A88B58), #d4b074, var(--color-accent, #A88B58));
  margin-bottom: 1rem;
  flex-shrink: 0;
}
.oc-photo-frame {
  width: 128px;
  height: 152px;
  border-radius: 11px;
  overflow: hidden;
  background: var(--bg-primary, #FAF8F5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.oc-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.oc-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #C8A96E, #A88B58);
  color: #fff;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: 1px;
}

/* Card text */
.oc-card-body { width: 100%; }
.oc-staff-name {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-main, #1A1A1A);
  line-height: 1.3;
  margin-bottom: 0.3rem;
}
.oc-staff-title {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--color-accent, #A88B58);
  margin-bottom: 0.5rem;
}
.oc-dept-badge {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 99px;
  background: var(--bg-primary, #FAF8F5);
  border: 1px solid var(--color-border, #E8E5DF);
  font-size: 0.67rem;
  font-weight: 500;
  color: var(--color-text-muted, #6B6A67);
}

/* Empty / loading states */
.oc-loading {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 3rem;
  color: var(--color-text-muted, #6B6A67);
  font-size: 0.85rem;
}
.oc-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 3rem;
  color: var(--color-text-muted, #6B6A67);
  font-size: 0.85rem;
}

/* Keep old .orgchart-info-card for uploaded image */
.orgchart-info-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--color-border, #E8E5DF);
  border-radius: 16px;
  overflow: hidden;
}

.orgchart-info-header {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 1rem;
  padding: 1.5rem 1.75rem 1.25rem;
  border-bottom: 1px solid var(--color-border, #E8E5DF);
}

.orgchart-title {
  font-size: 1.25rem; font-weight: 600;
  color: var(--color-text-main, #1A1A1A); margin: 0 0 0.25rem;
}
.orgchart-subtitle { font-size: 0.82rem; color: var(--color-text-muted, #6B6A67); margin: 0; }

.orgchart-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }

.btn-upload-orgchart {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer;
  font-size: 0.83rem; font-weight: 600;
  background: #EEF2FF; color: #6366F1; border: none;
  transition: background 0.15s, color 0.15s; white-space: nowrap;
}
.btn-upload-orgchart:hover { background: #6366F1; color: #fff; }

.btn-view-orgchart {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer;
  font-size: 0.83rem; font-weight: 600;
  background: var(--color-bg, #FAF8F5);
  border: 1px solid var(--color-border, #E8E5DF);
  color: var(--color-text-main, #1A1A1A);
  transition: background 0.15s; white-space: nowrap;
}
.btn-view-orgchart:hover { background: var(--color-border, #E8E5DF); }

.btn-delete-orgchart {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  background: #FEF2F2; color: #EF4444; border: none;
  transition: background 0.15s;
}
.btn-delete-orgchart:hover { background: #EF4444; color: #fff; }

/* Upload zone */
.orgchart-upload-zone {
  padding: 4rem 2rem;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--color-border, #E8E5DF);
  margin: 1.5rem; border-radius: 12px;
  transition: border-color 0.2s, background 0.2s;
}
.orgchart-upload-zone:hover { border-color: #6366F1; background: #F5F3FF; }

/* Preview */
.orgchart-preview-wrap { padding: 1.5rem; }

.orgchart-upload-progress {
  background: #F5F3FF; border-radius: 10px;
  padding: 1rem 1.25rem; margin-bottom: 1rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.orgchart-progress-bar {
  height: 6px; border-radius: 99px;
  background: linear-gradient(90deg, #6366F1, #818CF8);
  width: 0%; transition: width 0.3s ease;
}
.orgchart-progress-label { font-size: 0.8rem; color: #6366F1; font-weight: 500; }

.orgchart-img {
  width: 100%; border-radius: 10px;
  border: 1px solid var(--color-border, #E8E5DF);
  cursor: zoom-in; transition: box-shadow 0.2s;
  display: block;
}
.orgchart-img:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.12); }

.orgchart-img-meta {
  margin-top: 0.75rem; font-size: 0.78rem;
  color: var(--color-text-muted, #6B6A67);
  display: flex; gap: 1rem; flex-wrap: wrap;
}

/* ── Metric Card Action Buttons ── */
.metric-card-actions { display: flex; align-items: center; gap: 0.4rem; }
.metric-action-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.28rem 0.7rem; border-radius: 6px;
  font-size: 0.72rem; font-weight: 600; cursor: pointer; border: none;
  background: #EEF2FF; color: #6366F1;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.metric-action-btn:hover { background: #6366F1; color: #fff; }
.metric-action-btn.metric-action-btn-outline {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted);
}
.metric-action-btn.metric-action-btn-outline:hover { background: var(--border); color: var(--text-main); }

/* ── Salary inline edit form ── */
.salary-edit-grid { display: flex; flex-direction: column; gap: 0.75rem; }
.salary-edit-row { display: flex; flex-direction: column; gap: 0.3rem; }
.salary-edit-label { font-size: 0.78rem; color: var(--color-text-muted, #6B6A67); font-weight: 500; }
.salary-edit-input {
  width: 100%; padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border, #E8E5DF);
  border-radius: 8px; font-size: 0.88rem;
  color: var(--color-text-main, #1A1A1A);
  background: var(--color-bg, #FAF8F5);
  outline: none; transition: border-color 0.15s;
  box-sizing: border-box;
}
.salary-edit-input:focus { border-color: #6366F1; }
.salary-edit-actions {
  display: flex; justify-content: flex-end; gap: 0.5rem;
  margin-top: 1rem; padding-top: 0.75rem;
  border-top: 1px solid var(--color-border, #E8E5DF);
}

/* ── Left Card: Skills + Docs ── */
.profile-card-sep {
  height: 1px; background: var(--border-light);
  margin: 0.9rem 0;
}
.profile-skills-section, .profile-docs-section { margin-bottom: 0.75rem; }
.profile-skills-label {
  font-size: 0.7rem; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 0.45rem;
}
.profile-skill-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.skill-tag {
  display: inline-flex; align-items: center;
  padding: 0.22rem 0.6rem; border-radius: 20px;
  font-size: 0.71rem; font-weight: 500;
  background: #EEF2FF; color: #4F46E5;
  border: 1px solid rgba(99,102,241,0.2);
}
.skill-tag-empty { font-size: 0.75rem; color: var(--text-muted); font-style: italic; }
.profile-files-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.35rem 0.85rem; border-radius: 8px;
  font-size: 0.75rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-secondary, #F7F4EF);
  color: var(--text-main);
  transition: background 0.15s;
}
.profile-files-btn:hover { background: #EEF2FF; color: #6366F1; border-color: rgba(99,102,241,0.3); }

/* ── Achievement Pill Tags ── */
.achievements-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0.2rem 0; }
.achievement-tag {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.85rem; border-radius: 20px;
  font-size: 0.77rem; font-weight: 500;
  background: #FFF7ED; color: #C2410C;
  border: 1px solid #FED7AA;
  transition: transform 0.15s;
}
.achievement-tag:nth-child(2n) { background: #EEF2FF; color: #4F46E5; border-color: rgba(99,102,241,0.25); }
.achievement-tag:nth-child(3n) { background: #ECFDF5; color: #059669; border-color: #A7F3D0; }
.achievement-tag:hover { transform: translateY(-1px); }

/* ── Reminders / Tasks ── */
.profile-reminders-section {
  margin-top: 0.85rem; padding-top: 0.75rem;
  border-top: 1px solid var(--border-light);
}
.profile-reminders-header {
  display: flex; gap: 1rem; margin-bottom: 0.5rem;
}
.reminders-label, .tasks-label {
  display: flex; align-items: center; gap: 0.3rem;
  font-size: 0.75rem; font-weight: 600; color: var(--text-muted);
}
.profile-task-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.profile-task-list li {
  font-size: 0.78rem; color: var(--text-main);
  padding: 0.3rem 0.5rem 0.3rem 1rem;
  border-left: 2px solid #6366F1;
  background: #F8F9FF; border-radius: 0 6px 6px 0;
}
.task-item-empty { color: var(--text-muted) !important; font-style: italic; border-left-color: var(--border) !important; background: transparent !important; }

/* ── Attendance & Leave Mini Card ── */
.att-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  align-items: start;
}
.att-timein-section, .att-leave-section { display: flex; flex-direction: column; gap: 0.4rem; }
.att-legend-row { display: flex; align-items: center; gap: 0.4rem; }
.att-legend-dot {
  width: 10px; height: 10px; border-radius: 2px;
  background: #6366F1; flex-shrink: 0;
}
.att-legend-text { font-size: 0.72rem; color: var(--text-muted); font-weight: 500; }
.att-mini-chart {
  display: flex; align-items: flex-end; gap: 3px;
  height: 52px; padding: 0 1px;
}
.att-mini-bar {
  flex: 1; border-radius: 3px 3px 0 0;
  min-height: 4px; transition: height 0.4s ease;
}
.att-mini-days {
  display: flex; gap: 3px;
}
.att-mini-day-label {
  flex: 1; text-align: center;
  font-size: 0.62rem; color: var(--text-muted);
}
.att-leave-title { font-size: 0.75rem; font-weight: 600; color: var(--text-main); }
.att-leave-days { font-size: 0.72rem; color: var(--text-muted); }
.att-leave-days span { font-weight: 700; color: var(--text-main); }
.att-leave-bar-track {
  height: 8px; background: #F3F4F6;
  border-radius: 4px; overflow: hidden; margin-top: 0.2rem;
}
.att-leave-bar-fill {
  height: 100%; background: #10B981;
  border-radius: 4px; transition: width 0.8s ease;
}

/* ── KPI Trend Chart ── */
.kpi-trend-section {
  margin-top: 1rem; padding-top: 0.85rem;
  border-top: 1px solid var(--border-light);
}
.kpi-trend-label {
  font-size: 0.75rem; font-weight: 600; color: var(--text-main);
  margin-bottom: 0.5rem;
}
.kpi-trend-svg {
  width: 100%; height: 70px;
  display: block; overflow: visible;
}
.kpi-trend-months {
  display: flex; justify-content: space-between;
  margin-top: 0.2rem;
}
.kpi-trend-month {
  font-size: 0.61rem; color: var(--text-muted);
  text-align: center;
}
.kpi-trend-legend {
  display: flex; gap: 0.85rem; margin-top: 0.55rem; flex-wrap: wrap;
}
.kpi-legend-item { display: flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; color: var(--text-muted); }
.kpi-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Manager Notes ── */
.manager-notes-section {
  margin-top: 0.85rem; padding-top: 0.85rem;
  border-top: 1px solid var(--border-light);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.manager-notes-label {
  display: flex; align-items: center; gap: 0.3rem;
  font-size: 0.75rem; font-weight: 600; color: var(--text-main);
}
.manager-notes-input {
  width: 100%; padding: 0.55rem 0.75rem;
  font-size: 0.8rem; font-family: inherit; color: var(--text-main);
  background: var(--bg-secondary, #F7F4EF);
  border: 1px solid var(--border); border-radius: 8px;
  outline: none; resize: vertical;
  transition: border-color 0.18s, box-shadow 0.18s;
  box-sizing: border-box;
}
.manager-notes-input:focus { border-color: #6366F1; box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
.manager-notes-save {
  align-self: flex-end;
  padding: 0.35rem 0.9rem; border-radius: 7px;
  font-size: 0.75rem; font-weight: 600; cursor: pointer;
  background: #6366F1; color: #fff; border: none;
  transition: background 0.15s, transform 0.1s;
}
.manager-notes-save:hover { background: #4F46E5; transform: translateY(-1px); }

/* ── Activity Log ── */
.activity-log-section {
  margin-top: 1.25rem; padding: 1rem 1.25rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--border-radius-md);
}
.activity-log-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.85rem;
}
.activity-log-title {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.88rem; font-weight: 600; color: var(--text-main);
}
.activity-log-scroll {
  display: flex; gap: 1rem; overflow-x: auto;
  padding-bottom: 0.35rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.activity-log-scroll::-webkit-scrollbar { height: 4px; }
.activity-log-scroll::-webkit-scrollbar-track { background: transparent; }
.activity-log-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.activity-item {
  flex-shrink: 0; min-width: 160px; max-width: 180px;
  background: var(--bg-secondary, #F7F4EF);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.8rem;
  font-size: 0.73rem; color: var(--text-muted); line-height: 1.55;
}
.activity-item strong { display: block; color: var(--text-main); font-weight: 600; margin-bottom: 0.2rem; }
.activity-item-empty { font-size: 0.8rem; color: var(--text-muted); font-style: italic; padding: 0.5rem 0; }

/* Placeholder Tab Panels */
.hrm-tab-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5rem 2rem;
  gap: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

.hrm-tab-placeholder svg {
  width: 44px;
  height: 44px;
  fill: var(--text-muted);
  opacity: 0.35;
}

.hrm-tab-placeholder h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
}

.hrm-tab-placeholder p {
  font-size: 0.8rem;
  opacity: 0.7;
}

/* View Profile button */
.btn-view-hrm-staff {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
}

.btn-view-hrm-staff:hover {
  background: var(--accent) !important;
  color: #fff !important;
}

/* Responsive Profile */
@media (max-width: 1200px) {
  .hrm-profile-grid {
    grid-template-columns: 260px 1fr;
  }

  .hrm-profile-right-col {
    grid-column: 1 / 3;
    flex-direction: row;
  }
}

@media (max-width: 900px) {
  .hrm-profile-grid {
    grid-template-columns: 1fr;
  }

  .hrm-profile-right-col {
    grid-column: 1;
    flex-direction: column;
  }

  .hrm-ptab-panel { padding: 1rem; }
}

/* ===================================================
   CRM — CUSTOMER RELATIONSHIP MANAGEMENT MODULE
   =================================================== */

:root {
  --crm-blue: #2563EB;
  --crm-blue-light: #EFF6FF;
  --crm-blue-hover: #1D4ED8;
  --crm-blue-border: #BFDBFE;
}

body.dark-theme-crm {
  --crm-blue: #3B82F6;
  --crm-blue-light: rgba(59, 130, 246, 0.12);
  --crm-blue-border: rgba(59, 130, 246, 0.25);
}

/* ---- Wrapper ---- */
.crm-page-wrapper { flex-direction: column; }

/* ---- Sub-tabs bar ---- */
.crm-subtabs {
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.crm-subtabs::-webkit-scrollbar { display: none; }
.crm-subtab { flex-shrink: 0; }

.crm-subtab {
  padding: 1rem 1.4rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition-fast);
  letter-spacing: 0.3px;
}

.crm-subtab.active {
  color: var(--crm-blue);
  border-bottom-color: var(--crm-blue);
}

.crm-subtab:hover:not(.active) {
  color: var(--text-main);
  background: var(--bg-primary);
}

/* ---- Tab Content ---- */
.crm-tab-content {
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex: 1;
}

/* ---- Stats Bar ---- */
.crm-stats-bar {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.crm-stat-card {
  flex: 1;
  min-width: 160px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--border-radius-md);
  padding: 1.1rem 1.3rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: var(--transition-fast);
}

.crm-stat-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.crm-stat-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.crm-stat-icon svg { width: 20px; height: 20px; fill: currentColor; }

.crm-stat-body { flex: 1; min-width: 0; }

.crm-stat-label {
  font-size: 0.71rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 0.2rem;
  font-weight: 500;
}

.crm-stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1;
}

.crm-stat-delta {
  font-size: 0.71rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
  display: block;
}

/* ---- Overview Grid ---- */
.crm-overview-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 1.25rem;
}

/* ---- Metric Card (shared) ---- */
.crm-metric-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-md);
  padding: 1.25rem;
}

/* ── Revenue bar chart ───────────────────────────────────── */
.crm-revenue-chart-card { margin-bottom: 1.25rem; }

.crm-year-select {
  font-size: .78rem; font-weight: 600;
  padding: .3rem .65rem; border-radius: 8px;
  border: 1px solid var(--border, #E8E5DF);
  background: var(--bg-card, #fff); color: var(--color-text-main, #1A1A1A);
  cursor: pointer; outline: none;
  transition: border-color .15s;
}
.crm-year-select:focus { border-color: #6366F1; }

.crm-bar-chart {
  display: flex; align-items: flex-end; gap: .35rem;
  padding: .5rem 0 0;
  border-bottom: 2px solid var(--border, #E8E5DF);
}
.crm-bar-col {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  cursor: pointer; border-radius: 6px; padding: 4px 2px 0;
  transition: background .15s;
}
.crm-bar-col:hover { background: rgba(99,102,241,.06); }
.crm-bar-amount {
  font-size: .6rem; font-weight: 700;
  color: var(--color-text-muted, #6B6A67);
  min-height: 14px; text-align: center; line-height: 1.2; margin-bottom: 3px;
  white-space: nowrap;
}
.crm-bar-current .crm-bar-amount { color: #4F46E5; }
.crm-bar-wrap {
  width: 100%; display: flex; align-items: flex-end; justify-content: center;
}
.crm-bar {
  width: 72%; min-width: 8px;
  border-radius: 5px 5px 0 0;
  transition: filter .15s, transform .15s;
}
.crm-bar-col:hover .crm-bar { filter: brightness(1.1); transform: scaleY(1.03); transform-origin: bottom; }
.crm-bar-current .crm-bar { box-shadow: 0 4px 18px rgba(79,70,229,.35); }
.crm-bar-label {
  font-size: .67rem; font-weight: 600;
  color: var(--color-text-muted, #6B6A67);
  margin-top: 6px; text-align: center;
}
.crm-bar-current .crm-bar-label { color: #4F46E5; font-weight: 800; }

/* Day breakdown popup */
.crm-bar-popup {
  position: fixed; z-index: 3000;
  width: 320px; max-height: 320px;
  background: #fff; border: 1px solid #E0E7FF;
  border-radius: 12px; box-shadow: 0 12px 40px rgba(99,102,241,.18);
  overflow: hidden; display: flex; flex-direction: column;
  animation: cbdpFadeIn .18s ease;
}
@keyframes cbdpFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.cbdp-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: .65rem 1rem; background: #EEF2FF;
  font-size: .78rem; font-weight: 700; color: #3730A3;
  border-bottom: 1px solid #E0E7FF; flex-shrink: 0;
}
.cbdp-close {
  background: none; border: none; cursor: pointer;
  font-size: 1rem; color: #6366F1; line-height: 1; padding: 0 2px;
}
.cbdp-close:hover { color: #4F46E5; }
.cbdp-body { overflow-y: auto; flex: 1; padding: .4rem 0; }
.cbdp-row {
  display: grid; grid-template-columns: 68px 1fr auto;
  gap: .5rem; align-items: center;
  padding: .45rem 1rem; font-size: .76rem;
  border-bottom: 1px solid #F1F5F9;
}
.cbdp-row:last-child { border-bottom: none; }
.cbdp-day { font-weight: 700; color: #6366F1; }
.cbdp-names { color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbdp-amt { font-weight: 700; color: #1E293B; white-space: nowrap; }
.cbdp-footer {
  padding: .55rem 1rem; background: #F8FAFF;
  font-size: .76rem; color: #475569;
  border-top: 1px solid #E0E7FF; flex-shrink: 0;
}
.cbdp-footer strong { color: #4F46E5; }

.crm-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.crm-card-header h4 {
  font-size: 0.71rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.crm-card-subtitle { font-size: 0.71rem; color: var(--text-muted); opacity: 0.7; }

.crm-header-actions { display: flex; gap: 0.5rem; align-items: center; }

/* ---- Buttons ---- */
.crm-btn-accent {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  background: var(--crm-blue);
  color: #fff;
  border: none;
  border-radius: var(--border-radius-md);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-fast);
}

.crm-btn-accent:hover { background: var(--crm-blue-hover); }
.crm-btn-accent svg { width: 15px; height: 15px; fill: currentColor; }

.crm-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: var(--bg-primary);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-md);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-fast);
}

.crm-btn-secondary:hover { border-color: var(--crm-blue); color: var(--crm-blue); }
.crm-btn-secondary svg { width: 14px; height: 14px; fill: currentColor; }

/* ---- Chart Wrapper ---- */
.crm-chart-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0;
}
.crm-chart-wrapper canvas { max-width: 100%; }

/* ---- Status Breakdown List ---- */
.crm-status-list { display: flex; flex-direction: column; gap: 0.75rem; }

.crm-status-item { display: flex; align-items: flex-start; gap: 0.65rem; }

.crm-status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }

.crm-status-name { font-size: 0.8rem; color: var(--text-main); flex: 1; }

.crm-status-count { font-size: 0.8rem; font-weight: 700; color: var(--text-main); }

.crm-status-bar-track { height: 4px; border-radius: 2px; background: var(--border); margin-top: 0.3rem; width: 100%; }

.crm-status-bar-fill { height: 4px; border-radius: 2px; transition: width 0.6s ease; }

/* ---- Recent List ---- */
.crm-recent-list { display: flex; flex-direction: column; gap: 0.6rem; }

.crm-recent-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.crm-recent-item:last-child { border-bottom: none; }

.crm-recent-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.crm-recent-info { flex: 1; min-width: 0; }
.crm-recent-name { font-size: 0.82rem; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-recent-meta { font-size: 0.71rem; color: var(--text-muted); }

.crm-recent-badge { font-size: 0.67rem; font-weight: 600; padding: 2px 7px; border-radius: 20px; flex-shrink: 0; }

/* ---- Filter Bar ---- */
.crm-filter-bar { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }

.crm-search-wrap { flex: 1; min-width: 200px; position: relative; display: flex; align-items: center; }

.crm-search-wrap svg { position: absolute; left: 0.8rem; width: 15px; height: 15px; fill: var(--text-muted); opacity: 0.55; pointer-events: none; }

.crm-search-wrap input {
  width: 100%;
  padding: 0.55rem 0.8rem 0.55rem 2.3rem;
  border: 1px solid var(--border);
  border-radius: var(--border-radius-md);
  background: var(--bg-primary);
  color: var(--text-main);
  font-size: 0.82rem;
  outline: none;
  transition: var(--transition-fast);
}

.crm-search-wrap input:focus { border-color: var(--crm-blue); box-shadow: 0 0 0 3px var(--crm-blue-light); }

.crm-filter-bar select {
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--border-radius-md);
  background: var(--bg-primary);
  color: var(--text-main);
  font-size: 0.8rem;
  outline: none;
  cursor: pointer;
  transition: var(--transition-fast);
}

.crm-filter-bar select:focus { border-color: var(--crm-blue); }

/* ---- CRM Table ---- */
.crm-table { width: 100%; border-collapse: collapse; }

.crm-table th {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  padding: 0.7rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--bg-primary);
  position: sticky;
  top: 0;
  z-index: 1;
}

.crm-table td {
  padding: 0.8rem 1rem;
  font-size: 0.82rem;
  color: var(--text-main);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.crm-table tbody tr:hover { background: var(--crm-blue-light); }
.crm-table tbody tr:last-child td { border-bottom: none; }

/* ---- Status Pills ---- */
.crm-pill { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.71rem; font-weight: 600; }
.crm-badge-active { background: #DCFCE7; color: #16A34A; }
.crm-badge-waiting { background: #FEF9C3; color: #854D0E; }
.crm-badge-processing { background: #DBEAFE; color: #1D4ED8; }
.crm-badge-selected { background: #F3E8FF; color: #7C3AED; }

/* ==========================================================================
   LEAVE / NGHỈ PHÉP
   ========================================================================== */
.leave-kpi-row {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg, 16px);
  overflow: hidden;
  margin-bottom: 1.1rem;
}
.leave-kpi-card {
  flex: 1;
  text-align: center;
  padding: 1.25rem 1rem;
}
.leave-kpi-sep {
  width: 1px;
  align-self: stretch;
  background: var(--border);
}
.leave-kpi-num {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.leave-kpi-lbl {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.leave-progress-wrap {
  margin-bottom: 0.5rem;
}
.leave-progress-track {
  height: 8px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.leave-progress-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #10B981, #059669);
  transition: width 0.6s ease;
}
.leave-meta {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin: 0;
}
.leave-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 2rem;
  font-size: 0.82rem;
}
.leave-cancel-btn {
  background: #FEE2E2;
  color: #DC2626;
  border: none;
  border-radius: 6px;
  padding: 0.25rem 0.65rem;
  font-size: 0.75rem;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.leave-cancel-btn:hover { background: #DC2626; color: #fff; }

.crm-country-flag { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 600; }

/* ---- Action Buttons ---- */
.crm-action-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}
.crm-action-btn svg { width: 14px; height: 14px; fill: currentColor; }
.crm-action-btn.view { background: var(--crm-blue-light); color: var(--crm-blue); }
.crm-action-btn.view:hover { background: var(--crm-blue); color: #fff; }
.crm-action-btn.edit { background: #FEF3C7; color: #D97706; }
.crm-action-btn.edit:hover { background: #D97706; color: #fff; }
.crm-action-btn.delete { background: #FEE2E2; color: #DC2626; }
.crm-action-btn.delete:hover { background: #DC2626; color: #fff; }

/* ---- CRM Customers Section ---- */
.crm-customers-section { flex: 1; }

/* ---- Customer Profile View ---- */
.crm-profile-view {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.crm-profile-topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.crm-back-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-md);
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
  flex-shrink: 0;
}
.crm-back-btn:hover { border-color: var(--crm-blue); color: var(--crm-blue); }
.crm-back-btn svg { width: 16px; height: 16px; fill: currentColor; }

.crm-profile-nav-tabs { display: flex; align-items: center; flex: 1; overflow-x: auto; }

.crm-ptab {
  padding: 0.65rem 1.2rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}
.crm-ptab.active { color: var(--crm-blue); border-bottom-color: var(--crm-blue); }
.crm-ptab:hover:not(.active) { color: var(--text-main); }

.crm-profile-header-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

/* ---- Profile Tab Panels ---- */
.crm-ptab-panel { display: none; flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; }
.crm-ptab-panel.active { display: block; }

/* ---- Profile 3-col Grid ---- */
.crm-profile-grid {
  display: grid;
  grid-template-columns: 270px 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}

/* ---- Left Profile Card ---- */
.crm-profile-info-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

.crm-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1.25rem 1.25rem;
  background: linear-gradient(135deg, var(--crm-blue-light) 0%, transparent 100%);
  border-bottom: 1px solid var(--border);
  gap: 0.5rem;
}

.crm-avatar-lg {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--crm-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

.crm-name-block { text-align: center; display: flex; flex-direction: column; gap: 0.25rem; align-items: center; }
.crm-name-block h2 { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 500; color: var(--text-main); }
.crm-name-block > span { font-size: 0.74rem; font-family: monospace; color: var(--crm-blue); font-weight: 600; }

.crm-country-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--crm-blue-light);
  color: var(--crm-blue);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid var(--crm-blue-border);
}
.crm-country-badge svg { width: 12px; height: 12px; fill: currentColor; }

.crm-status-badge { font-size: 0.72rem; font-weight: 600; padding: 4px 12px; border-radius: 20px; background: #DCFCE7; color: #16A34A; }
.crm-status-badge.inactive { background: #FEE2E2; color: #DC2626; }
.crm-status-badge.processing { background: #DBEAFE; color: #1D4ED8; }
.crm-status-badge.waiting { background: #FEF9C3; color: #854D0E; }
.crm-status-badge.selected { background: #F3E8FF; color: #7C3AED; }

.crm-info-rows { padding: 0 1.25rem; display: flex; flex-direction: column; }

.crm-info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
  gap: 0.5rem;
}
.crm-info-row:last-child { border-bottom: none; }
.crm-info-label { font-size: 0.74rem; color: var(--text-muted); font-weight: 500; flex-shrink: 0; }
.crm-info-val { font-size: 0.8rem; color: var(--text-main); font-weight: 500; text-align: right; word-break: break-all; }

/* ---- Middle / Right Columns ---- */
.crm-profile-mid-col,
.crm-profile-right-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ---- Pipeline ---- */
.crm-pipeline-stages { display: flex; flex-direction: column; gap: 0.45rem; }

.crm-pipeline-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-primary);
  transition: var(--transition-fast);
}
.crm-pipeline-step.current { border-color: var(--crm-blue); background: var(--crm-blue-light); }
.crm-pipeline-step.done { border-color: #BBF7D0; background: #F0FDF4; }

.crm-pipeline-indicator {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--border);
  color: var(--text-muted);
}
.crm-pipeline-step.done .crm-pipeline-indicator { background: #16A34A; color: #fff; }
.crm-pipeline-step.current .crm-pipeline-indicator { background: var(--crm-blue); color: #fff; }

.crm-pipeline-label { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
.crm-pipeline-step.done .crm-pipeline-label { color: #16A34A; }
.crm-pipeline-step.current .crm-pipeline-label { color: var(--crm-blue); }

/* ---- Personal Stats ---- */
.crm-personal-stats { display: flex; flex-direction: column; }

.crm-pstat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
}
.crm-pstat-row:last-child { border-bottom: none; }
.crm-pstat-label { font-size: 0.78rem; color: var(--text-muted); }
.crm-pstat-val { font-size: 0.82rem; font-weight: 700; color: var(--text-main); }

/* ---- Progress Donut ---- */
.crm-progress-wrapper { display: flex; justify-content: center; padding: 0.5rem 0; }
.crm-progress-legend { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.5rem; }

.crm-leg-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; }
.crm-leg-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.crm-leg-label { flex: 1; color: var(--text-muted); }
.crm-leg-val { font-weight: 600; color: var(--text-main); }

/* ---- Notes ---- */
.crm-notes-display { font-size: 0.82rem; color: var(--text-main); line-height: 1.65; min-height: 60px; }

/* ---- Journey Timeline ---- */
.crm-journey-timeline { display: flex; flex-direction: column; padding: 0.5rem 0; }

.crm-timeline-item { display: flex; gap: 1rem; position: relative; padding-bottom: 1.25rem; }
.crm-timeline-item::before { content: ''; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--border); }
.crm-timeline-item:last-child::before { display: none; }

.crm-timeline-dot { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.crm-timeline-content { flex: 1; }
.crm-timeline-title { font-size: 0.84rem; font-weight: 600; color: var(--text-main); }
.crm-timeline-date { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem; }

/* ---- Placeholder ---- */
.crm-tab-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5rem 2rem; gap: 0.85rem; color: var(--text-muted); text-align: center; }
.crm-tab-placeholder svg { width: 44px; height: 44px; fill: var(--text-muted); opacity: 0.35; }
.crm-tab-placeholder h3 { font-size: 0.95rem; font-weight: 600; color: var(--text-muted); }
.crm-tab-placeholder p { font-size: 0.8rem; opacity: 0.7; }

/* ---- Staff status badges ---- */
.crm-staff-badge { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 0.7rem; font-weight: 600; }
.crm-staff-badge.active { background: #DCFCE7; color: #16A34A; }
.crm-staff-badge.leave  { background: #FEF9C3; color: #854D0E; }
.crm-staff-badge.left   { background: #FEE2E2; color: #DC2626; }

.crm-row-action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px; border: none; cursor: pointer;
  background: transparent; color: var(--text-muted);
  transition: background 0.15s, color 0.15s;
}
.crm-row-action-btn svg { width: 14px; height: 14px; fill: currentColor; pointer-events: none; }
.crm-row-action-btn.view:hover   { background: #EFF6FF; color: #2563EB; }
.crm-row-action-btn.edit:hover   { background: #F0FDF4; color: #16A34A; }
.crm-row-action-btn.delete:hover { background: #FEF2F2; color: #DC2626; }

/* CRM Staff Full-Page Profile Overlay — sits inside .portal-main-workspace (position:relative) */
.crm-staff-profile-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: hrmFadeIn 0.25s ease;
}

/* Profile tab buttons (mirrors .hrm-ptab but scoped to CRM staff profile) */
.crmsp-tab {
  padding: 1rem 1.1rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  border: none;
  background: none;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
  position: relative;
}
.crmsp-tab::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.crmsp-tab:hover { color: var(--text-main); background: var(--accent-light); }
.crmsp-tab.active { color: var(--accent); font-weight: 600; }
.crmsp-tab.active::after { width: 75%; }

/* Profile tab panels */
.crmsp-panel { display: none; flex: 1; overflow-y: auto; padding: 1.5rem; }
.crmsp-panel.active { display: block; }

/* Attendance (Chấm công) */
.hrm-attendance-legend {
  display: flex; gap: 1.2rem; flex-wrap: wrap;
  font-size: 0.78rem; color: var(--text-muted);
  margin: 0.75rem 0 1.25rem;
}
.att-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.att-dot.att-full { background: #10B981; }
.att-dot.att-half { background: #F59E0B; }
.att-dot.att-absent { background: #EF4444; }
.att-dot.att-off { background: #8B5CF6; }
.att-dot.att-empty { background: var(--text-muted); opacity: 0.4; }

.hrm-attendance-table th, .hrm-attendance-table td { text-align: center; white-space: nowrap; padding: 0.5rem 0.55rem; font-size: 0.8rem; }
.hrm-attendance-table .att-name-cell { text-align: left; min-width: 180px; }
.att-cell { font-weight: 600; border-radius: 4px; }
.att-cell.att-full { color: #10B981; }
.att-cell.att-half { color: #F59E0B; }
.att-cell.att-absent { color: #EF4444; }
.att-cell.att-off { color: #8B5CF6; }
.att-cell.att-empty { color: var(--text-muted); opacity: 0.45; }
#hrmAttendanceBody .att-cell { cursor: pointer; transition: background 0.15s; }
#hrmAttendanceBody .att-cell:hover { background: var(--accent-light); }

/* ================================================================
   ATTENDANCE DASHBOARD — Staff check-in UI
   ================================================================ */

/* Thẻ hôm nay */
.att-today-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  padding: 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  box-shadow: var(--shadow-sm);
}
.att-today-date {
  font-size: 0.9rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.att-time-row {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.att-time-block {
  text-align: center;
}
.att-time-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
}
.att-time-value {
  font-size: 2rem;
  font-weight: 700;
  font-family: var(--font-serif);
  color: var(--text-main);
  letter-spacing: 0.02em;
}
.att-time-divider {
  width: 1px;
  height: 2.5rem;
  background: var(--border);
}
.att-btn-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}
.att-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--border-radius-md);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.att-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none !important;
}
.att-btn:not(:disabled):hover { transform: translateY(-1px); }
.att-btn-in  { background: #10B981; color: #fff; }
.att-btn-out { background: var(--text-main); color: var(--bg-primary); }

/* KPI tháng */
.att-kpi-grid {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.att-kpi-box {
  flex: 1;
  min-width: 90px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-md);
  padding: 0.85rem 1rem;
  text-align: center;
}
.att-kpi-val   { font-size: 1.65rem; font-weight: 700; }
.att-kpi-label { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.2rem; }

/* Bảng tháng */
.att-month-table .att-col-date { width: 52px; font-weight: 600; }
.att-month-table .att-col-dow  { width: 42px; }
.att-month-table .att-col-time { width: 80px; font-variant-numeric: tabular-nums; }
.att-month-table .att-dash     { color: var(--text-muted); opacity: 0.4; }
.att-month-table .att-row-weekend td { opacity: 0.42; }

/* Badge trạng thái */
.att-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.att-badge-full   { background: #D1FAE5; color: #065F46; }
.att-badge-half   { background: #FEF3C7; color: #92400E; }
.att-badge-absent { background: #F3F4F6; color: #6B7280; }
.att-badge-off    { background: #EDE9FE; color: #5B21B6; }

/* ---- Pagination ---- */
.crm-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  padding: 0.85rem 1rem 0.5rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.crm-page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.crm-page-btn:hover:not(:disabled) {
  background: var(--crm-blue-light);
  border-color: var(--crm-blue-border);
  color: var(--crm-blue);
}

.crm-page-btn.active {
  background: var(--crm-blue);
  border-color: var(--crm-blue);
  color: #fff;
  font-weight: 600;
}

.crm-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.crm-page-info {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-right: auto;
}

/* Remove table max-height now that pagination handles it */
.mini-table-container { overflow-x: auto; }

/* ═══════════════════════════════════════════════
   1OFFICE-STYLE INTERNAL CHAT  (ioc-*)
   ═══════════════════════════════════════════════ */

.crm-chat-tab-content { padding: 0 !important; overflow: hidden !important; }

/* 3-column grid */
/* ═══════════════════════════════════════════════════════
   IOC INTERNAL CHAT  —  1Office-style layout
═══════════════════════════════════════════════════════ */
:root { --ioc-purple: #6366F1; --ioc-purple-light: rgba(99,102,241,0.09); --ioc-purple-hover: #4F46E5; }

.ioc-layout {
  display: grid;
  grid-template-columns: 300px 1fr 290px;
  height: 100%;
  overflow: hidden;
  position: relative;
  background: #F4F5F8;
  font-family: var(--font-sans);
}

/* ── Left sidebar ── */
.ioc-sidebar {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #F9FAFB; /* Khói nhẹ hiện đại */
}

.ioc-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.25rem 0.8rem;
  flex-shrink: 0;
}

.ioc-sidebar-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  font-family: var(--font-serif);
  letter-spacing: -0.3px;
}

.ioc-sidebar-head-acts {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.ioc-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
  flex-shrink: 0;
}

.ioc-icon-btn:hover {
  background: rgba(99, 102, 241, 0.08);
  color: var(--ioc-purple);
  transform: translateY(-1px);
}

.ioc-icon-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.ioc-sidebar-search {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.25rem 1.25rem 0.75rem;
  padding: 0.65rem 1rem;
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid #E5E7EB;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: var(--transition-smooth);
}

.ioc-sidebar-search:focus-within {
  border-color: var(--ioc-purple);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.ioc-sidebar-search svg {
  width: 16px;
  height: 16px;
  fill: var(--text-muted);
  flex-shrink: 0;
}

.ioc-sidebar-search input {
  flex: 1;
  border: none;
  background: none;
  color: var(--text-main);
  font-size: 0.85rem;
  outline: none;
}

.ioc-sidebar-search input::placeholder {
  color: #9CA3AF;
}

.ioc-filter-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 1.25rem 0.75rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid #E5E7EB;
  background: #ffffff;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
  border-radius: 20px;
  transition: var(--transition-smooth);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.ioc-filter-row:hover {
  background: #F3F4F6;
  border-color: #D1D5DB;
}

.ioc-thread-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  padding: 0.75rem 1.35rem 0.35rem;
  opacity: 0.8;
}

.ioc-conv-list {
  overflow-y: auto;
  padding-bottom: 1rem;
}

.ioc-conv-list::-webkit-scrollbar {
  width: 5px;
}

.ioc-conv-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 10px;
}

.ioc-conv-list::-webkit-scrollbar-track {
  background: transparent;
}

.ioc-conv-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-radius: 12px;
  margin: 4px 10px;
  transition: var(--transition-smooth);
  position: relative;
  background: transparent;
}

.ioc-conv-item:hover {
  background: rgba(99, 102, 241, 0.04);
}

.ioc-conv-item.active {
  background: #EEF0FF;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.06);
}

.ioc-conv-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  background: var(--ioc-purple);
  border-radius: 0 4px 4px 0;
}

.ioc-conv-av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  background: linear-gradient(135deg, #818CF8, #6366F1);
}

.ioc-conv-av .ioc-online {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #10B981;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ioc-conv-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ioc-conv-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}

.ioc-conv-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}

.ioc-conv-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.ioc-conv-preview {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.ioc-conv-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  flex-shrink: 0;
}

.ioc-conv-time {
  font-size: 0.7rem;
  color: var(--text-muted);
  flex-shrink: 0;
  font-weight: 500;
}

.ioc-unread-dot {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--ioc-purple);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(99, 102, 241, 0.3);
}

/* ── Middle: main chat ── */
.ioc-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #F3F4F6; /* Màu xám khói nhẹ */
  border-right: 1px solid var(--border);
}

.ioc-main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  background: #fff;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.02);
}

.ioc-main-info {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.ioc-main-av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366F1, #4F46E5);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

.ioc-main-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.2px;
}

.ioc-main-sub {
  font-size: 0.75rem;
  color: var(--ioc-purple);
  font-weight: 500;
}

.ioc-main-acts {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* In-chat search */
.ioc-msg-search-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.25rem;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  background: #fff;
  flex-shrink: 0;
}

.ioc-msg-search-bar svg {
  width: 16px;
  height: 16px;
  fill: var(--text-muted);
  flex-shrink: 0;
}

.ioc-msg-search-bar input {
  flex: 1;
  border: none;
  background: none;
  color: var(--text-main);
  font-size: 0.84rem;
  outline: none;
}

/* Reply strip */
.ioc-reply-strip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.25rem;
  border-bottom: 1px solid rgba(99,102,241,0.12);
  background: rgba(99,102,241,0.04);
  flex-shrink: 0;
}

.ioc-reply-bar {
  width: 3px;
  height: 32px;
  background: var(--ioc-purple);
  border-radius: 2px;
  flex-shrink: 0;
}

.ioc-reply-content {
  flex: 1;
  min-width: 0;
}

.ioc-reply-sender {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ioc-purple);
}

.ioc-reply-text {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Messages */
.ioc-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
}

.ioc-messages::-webkit-scrollbar {
  width: 5px;
}

.ioc-messages::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 10px;
}

.ioc-messages::-webkit-scrollbar-track {
  background: transparent;
}

/* Date divider */
.ioc-date-divider {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 1.25rem 1.25rem 0.5rem;
}

.ioc-date-divider::before, .ioc-date-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,0.06);
}

.ioc-date-divider span {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
  background: #F3F4F6;
  padding: 0.25rem 0.85rem;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.05);
}

/* System message */
.ioc-sys-msg {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 0.35rem 1.25rem;
  font-style: italic;
}

/* Message row */
.ioc-msg-row {
  display: flex;
  align-items: flex-end;
  gap: 0.55rem;
  padding: 0.1rem 1.25rem;
  position: relative;
}

.ioc-msg-row.condensed {
  padding-top: 0.05rem;
  padding-bottom: 0.05rem;
}

.ioc-msg-row.self {
  flex-direction: row-reverse;
}

.ioc-msg-row:hover .ioc-msg-actions {
  opacity: 1;
}

/* First message in a group gets slight top margin */
.ioc-date-divider + .ioc-msg-row,
.ioc-msg-row:not(.condensed) {
  margin-top: 0.75rem;
}

.ioc-msg-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 2px;
}
.ioc-msg-row.condensed .ioc-msg-av { visibility: hidden; }
.ioc-msg-row.self .ioc-msg-av { display: none; }

.ioc-msg-body { display: flex; flex-direction: column; gap: 0.15rem; max-width: 68%; min-width: 0; }
.ioc-msg-row.self .ioc-msg-body { align-items: flex-end; }

.ioc-msg-name { font-size: 0.69rem; font-weight: 600; color: var(--text-muted); padding: 0 0.35rem; margin-bottom: 0.05rem; }
.ioc-msg-row.self .ioc-msg-name { display: none; }
.ioc-msg-row.condensed .ioc-msg-name { display: none; }

/* Reply quote inside bubble */
.ioc-msg-quote {
  padding: 0.3rem 0.6rem;
  border-left: 3px solid rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.1);
  border-radius: 6px;
  margin-bottom: 0.25rem;
  font-size: 0.73rem;
  opacity: 0.85;
}
.ioc-msg-row:not(.self) .ioc-msg-quote {
  border-left-color: var(--ioc-purple);
  background: rgba(99,102,241,0.07);
  color: var(--text-muted);
}
.ioc-msg-quote-sender { font-weight: 600; font-size: 0.7rem; color: var(--ioc-purple); display: block; }
.ioc-msg-row.self .ioc-msg-quote-sender { color: rgba(255,255,255,0.85); }

/* Bubble */
.ioc-msg-bubble {
  padding: 0.65rem 1.1rem;
  border-radius: 16px;
  font-size: 0.85rem;
  line-height: 1.6;
  word-break: break-word;
  position: relative;
  max-width: 100%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.03), 0 1px 2px rgba(0,0,0,0.02);
}
.ioc-msg-row:not(.self) .ioc-msg-bubble {
  background: #fff;
  color: var(--text-main);
  border-bottom-left-radius: 4px;
  border: 1px solid rgba(0,0,0,0.03);
}
.ioc-msg-row.self .ioc-msg-bubble {
  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
  color: #fff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 12px rgba(99,102,241,0.18);
}
.ioc-msg-bubble.sending { opacity: 0.65; }
.ioc-msg-bubble.recalled {
  background: none !important;
  border: 1px dashed #D1D5DB !important;
  color: var(--text-muted) !important;
  font-style: italic;
  font-size: 0.8rem;
  padding: 0.4rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  box-shadow: none;
}
.ioc-msg-text { display: block; }

/* Images and files in messages */
.ioc-msg-img-wrap { margin-bottom: 0.3rem; }
.ioc-msg-img {
  max-width: 260px;
  max-height: 240px;
  border-radius: 12px;
  display: block;
  cursor: zoom-in;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.04);
}
.ioc-msg-img:hover { transform: scale(1.02); }

/* Media-only bubble: no colored wrapper */
.ioc-msg-bubble.media-only {
  background: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.ioc-msg-bubble.media-only .ioc-msg-img-wrap { margin-bottom: 0; }
.ioc-msg-file-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0,0,0,0.05);
  border-radius: 10px;
  padding: 0.45rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 0.15rem;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ioc-msg-file-pill svg { width: 15px; height: 15px; flex-shrink: 0; fill: currentColor; }
.ioc-msg-row.self .ioc-msg-file-pill { background: rgba(255,255,255,0.15); }

/* Edited label */
.ioc-msg-edited {
  font-size: 0.65rem;
  opacity: 0.6;
  margin-left: 0.35rem;
  font-style: italic;
}

/* Pin indicator */
.ioc-msg-pinned-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.65rem;
  background: rgba(255,193,7,0.15);
  color: #92651a;
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 0.4rem;
  font-weight: 600;
}
.ioc-msg-row.self .ioc-msg-pinned-badge { background: rgba(255,255,255,0.22); color: rgba(255,255,255,0.9); }

/* File preview strip (above input bar) */
.ioc-file-preview-strip {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,0.05);
  border-bottom: none;
  animation: hrmFadeIn 0.15s ease;
}
.ioc-input-bar { border-top: 1px solid var(--border); }
.ioc-file-preview-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  overflow: hidden;
}
.ioc-file-preview-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.ioc-file-preview-name {
  font-size: 0.8rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ioc-file-preview-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ioc-file-preview-pill svg { width: 14px; height: 14px; fill: var(--text-muted); flex-shrink: 0; }

.ioc-msg-meta {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0 0.35rem;
  opacity: 0;
  transition: opacity 0.15s;
  height: 14px;
}
.ioc-msg-row:hover .ioc-msg-meta { opacity: 1; }
.ioc-msg-time { font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; }

/* Hover action bar */
.ioc-msg-actions {
  opacity: 0;
  display: flex;
  align-items: center;
  gap: 0.1rem;
  transition: opacity 0.15s;
  align-self: center;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 0.2rem 0.3rem;
  box-shadow: 0 3px 12px rgba(0,0,0,0.08);
}
.ioc-msg-action-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}
.ioc-msg-action-btn:hover { background: rgba(99, 102, 241, 0.08); color: var(--ioc-purple); }
.ioc-msg-action-btn svg { width: 15px; height: 15px; fill: currentColor; }

/* Input bar */
.ioc-input-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid rgba(0,0,0,0.05);
  background: #fff;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.02);
  flex-shrink: 0;
}

.ioc-tool-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
  flex-shrink: 0;
}
.ioc-tool-btn:hover { background: rgba(99, 102, 241, 0.08); color: var(--ioc-purple); }
.ioc-tool-btn svg { width: 20px; height: 20px; fill: currentColor; }

.ioc-input-bar input {
  flex: 1; padding: 0.7rem 1.25rem;
  border: 1px solid #E5E7EB;
  border-radius: 24px;
  background: #F9FAFB;
  color: var(--text-main); font-size: 0.86rem;
  outline: none; transition: var(--transition-smooth);
}
.ioc-input-bar input:focus {
  background: #fff;
  border-color: var(--ioc-purple);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}

.ioc-send-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--ioc-purple);
  color: #fff; border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: var(--transition-smooth);
  box-shadow: 0 3px 8px rgba(99,102,241,0.3);
}
.ioc-send-btn:hover { background: var(--ioc-purple-hover); transform: scale(1.06); }
.ioc-send-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* ── Right info panel ── */
.ioc-info-panel {
  display: flex; flex-direction: column;
  overflow-y: auto;
  background: #fff;
  border-left: 1px solid rgba(0,0,0,0.07);
  transition: width 0.2s ease;
}
.ioc-info-panel.hidden { display: none; }

/* When info panel is hidden, chat column expands */
.ioc-layout.ioc-info-hidden {
  grid-template-columns: 300px 1fr;
  transition: grid-template-columns 0.2s ease;
}

.ioc-info-group-hd {
  display: flex; flex-direction: column; align-items: center;
  padding: 1.75rem 1rem 1.1rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  text-align: center;
}

.ioc-info-group-av {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366F1, #4F46E5);
  color: #fff; font-size: 1.3rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.75rem;
  box-shadow: 0 4px 12px rgba(99,102,241,0.35);
}

.ioc-info-group-name {
  font-size: 0.95rem; font-weight: 700; color: var(--text-main);
  display: flex; align-items: center; gap: 0.4rem; justify-content: center;
}

.ioc-info-edit-btn {
  width: 22px; height: 22px; border-radius: 6px;
  border: none; background: none; color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ioc-info-edit-btn:hover { color: var(--ioc-purple); }
.ioc-info-edit-btn svg { width: 13px; height: 13px; fill: currentColor; }

.ioc-info-group-desc { font-size: 0.76rem; color: var(--text-muted); margin-top: 0.35rem; line-height: 1.5; }

/* Row-style quick actions (matching 1Office right panel) */
.ioc-info-quick-acts {
  display: flex; flex-direction: column;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.ioc-info-row-btn {
  display: flex; align-items: center; gap: 0.75rem;
  width: 100%; padding: 0.7rem 1.1rem;
  border: none; background: none; cursor: pointer;
  font-size: 0.83rem; color: var(--text-main);
  text-align: left; transition: background 0.12s;
}
.ioc-info-row-btn:hover { background: #F4F5F8; }
.ioc-info-row-icon {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ioc-info-row-icon svg { width: 17px; height: 17px; fill: currentColor; }
.ioc-row-icon-star { background: #FFF7E6; color: #F59E0B; }
.ioc-row-icon-bell { background: #F0F1FF; color: var(--ioc-purple); }
.ioc-row-icon-people { background: #ECFDF5; color: #10B981; }

/* Legacy quick-btn (fallback) */
.ioc-info-quick-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.3rem; padding: 0.5rem 0.75rem; border-radius: 10px;
  border: none; background: #F4F5F8; color: var(--text-muted);
  font-size: 0.68rem; font-weight: 500; cursor: pointer; transition: var(--transition-fast); min-width: 60px;
}
.ioc-info-quick-btn:hover { background: #F0F1FF; color: var(--ioc-purple); }
.ioc-info-quick-icon { font-size: 1rem; display: flex; align-items: center; }
.ioc-info-quick-icon svg { width: 18px; height: 18px; fill: currentColor; }

.ioc-info-section { border-bottom: 1px solid rgba(0,0,0,0.06); padding: 0.25rem 0; }
.ioc-info-section-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-muted); padding: 0.65rem 1rem 0.3rem; }

.ioc-info-item {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 1rem; width: 100%; border: none; background: none;
  color: var(--text-main); font-size: 0.83rem; text-align: left;
  cursor: pointer; transition: background 0.12s;
}
.ioc-info-item:hover { background: #F4F5F8; color: var(--ioc-purple); }
.ioc-info-item-icon { width: 30px; height: 30px; border-radius: 8px; background: #F4F5F8; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ioc-info-item-icon svg { width: 15px; height: 15px; fill: var(--text-muted); }
.ioc-info-item:hover .ioc-info-item-icon svg { fill: var(--ioc-purple); }
.ioc-info-arrow { width: 16px; height: 16px; fill: var(--text-muted); margin-left: auto; flex-shrink: 0; }
.ioc-badge { background: var(--ioc-purple); color: #fff; font-size: 0.65rem; font-weight: 700; border-radius: 20px; padding: 1px 7px; margin-left: auto; }

.ioc-info-sub-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  flex-shrink: 0;
}

.ioc-members-list { padding: 0.5rem 0; overflow-y: auto; }
.ioc-member-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 1rem;
  transition: var(--transition-fast);
}
.ioc-member-item:hover { background: #F4F5F8; }
.ioc-member-av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  position: relative;
}
.ioc-member-online {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #16A34A;
  border: 2px solid var(--bg-card);
}
.ioc-member-info { min-width: 0; flex: 1; }
.ioc-member-name { font-size: 0.81rem; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ioc-member-role { font-size: 0.71rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ioc-member-item { cursor: pointer; }
.ioc-member-dm-icon { width: 14px; height: 14px; fill: var(--text-muted); opacity: 0; transition: opacity 0.15s; flex-shrink: 0; }
.ioc-member-item:hover .ioc-member-dm-icon { opacity: 1; color: var(--ioc-purple); fill: var(--ioc-purple); }

.ioc-empty-list { padding: 1.2rem 1rem; font-size: 0.78rem; color: var(--text-muted); text-align: center; }

.ioc-pinned-list { padding: 0.5rem 0; overflow-y: auto; }
.ioc-pinned-item {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: var(--transition-fast);
}
.ioc-pinned-item:hover { background: #F0F1FF; }
.ioc-pinned-item-sender { font-size: 0.72rem; font-weight: 600; color: var(--ioc-purple); }
.ioc-pinned-item-text { font-size: 0.8rem; color: var(--text-main); margin-top: 0.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Image lightbox ── */
.ioc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  animation: hrmFadeIn 0.18s ease;
}
.ioc-lightbox img {
  max-width: 90vw;
  max-height: 88vh;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.ioc-lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.ioc-lightbox-close:hover { background: rgba(255,255,255,0.28); }

/* ── IOC Modal (Forward / New Chat) ── */
.ioc-modal-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.ioc-modal-box {
  background: var(--bg-card); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  width: 100%; max-width: 400px; display: flex; flex-direction: column; overflow: hidden;
  max-height: 80vh;
}
.ioc-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.2rem; border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: 0.95rem; color: var(--text-main);
}
.ioc-modal-preview {
  padding: 0.75rem 1.2rem;
  background: var(--bg-primary); border-bottom: 1px solid var(--border);
  font-size: 0.82rem; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ioc-modal-search { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
.ioc-modal-search input {
  width: 100%; padding: 0.5rem 0.8rem;
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 0.85rem; background: var(--bg-primary); color: var(--text-main);
}
.ioc-fwd-list {
  flex: 1; overflow-y: auto; padding: 0.5rem 0;
  max-height: 280px;
}
.ioc-fwd-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 1.2rem; cursor: pointer; transition: background 0.15s;
  font-size: 0.88rem; color: var(--text-main);
}
.ioc-fwd-item:hover { background: var(--bg-primary); }
.ioc-fwd-item.selected { background: rgba(37,99,235,0.08); }
.ioc-fwd-item .ioc-member-av { width: 34px; height: 34px; font-size: 0.75rem; flex-shrink: 0; }
.ioc-modal-actions {
  display: flex; gap: 0.75rem; justify-content: flex-end;
  padding: 0.9rem 1.2rem; border-top: 1px solid var(--border);
}

/* ── Media grid ── */
.ioc-media-grid { padding: 0.75rem; display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; overflow-y: auto; }
.ioc-media-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; cursor: pointer; transition: opacity 0.15s; }
.ioc-media-thumb:hover { opacity: 0.8; }

/* ── Rename input ── */
.ioc-rename-input {
  width: 100%; font-size: inherit; font-weight: inherit; font-family: inherit;
  border: none; border-bottom: 2px solid var(--accent);
  background: transparent; color: var(--text-main); outline: none; padding: 2px 0;
}

/* ── DM preview & unread badge ── */
.ioc-conv-unread {
  background: var(--ioc-purple); color: #fff;
  border-radius: 10px; font-size: 0.65rem; font-weight: 700;
  min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}
.ioc-fav-section { font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.7px; color: var(--text-muted); padding: 0.4rem 1rem 0.2rem; }

/* ── Context Menu ── */
.ioc-ctx-menu {
  position: fixed;
  z-index: 9999;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  padding: 0.35rem 0;
  min-width: 200px;
  animation: ctxFadeIn 0.12s ease;
}
@keyframes ctxFadeIn { from { opacity:0; transform: scale(0.95) translateY(-4px); } to { opacity:1; transform: scale(1) translateY(0); } }

.ioc-ctx-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 1rem;
  border: none;
  background: none;
  color: var(--text-main);
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
  transition: var(--transition-fast);
}
.ioc-ctx-item:hover { background: #F0F1FF; color: var(--ioc-purple); }
.ioc-ctx-item svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.ioc-ctx-danger { color: #DC2626; }
.ioc-ctx-danger:hover { background: #FEE2E2; color: #DC2626; }
.ioc-ctx-divider { height: 1px; background: var(--border); margin: 0.25rem 0; }
.ioc-ctx-mine-only { display: none; }

/* ── Emoji Picker ── */
.ioc-emoji-picker {
  position: fixed;
  z-index: 9998;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  padding: 0.75rem;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.2rem;
  width: 280px;
}
.ioc-emoji-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}
.ioc-emoji-btn:hover { background: #F0F1FF; transform: scale(1.2); }

/* ── Edit overlay ── */
.ioc-edit-overlay {
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
}
.ioc-edit-box {
  background: var(--bg-card);
  border-radius: 14px;
  padding: 1.5rem;
  width: min(480px, 90vw);
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.ioc-edit-label { font-size: 0.88rem; font-weight: 700; color: var(--text-main); margin-bottom: 0.75rem; }
.ioc-edit-box textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-primary);
  color: var(--text-main);
  font-size: 0.85rem;
  resize: vertical;
  outline: none;
  font-family: inherit;
  transition: var(--transition-fast);
}
.ioc-edit-box textarea:focus { border-color: var(--ioc-purple); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
.ioc-edit-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.75rem; }

/* Loading */
.crm-chat-loading { text-align: center; color: var(--text-muted); font-size: 0.82rem; padding: 2rem; }

/* ── Responsive ── */
@media (max-width: 1200px) {
  .crm-overview-grid { grid-template-columns: 1fr 1fr; }
  .crm-chart-area { grid-column: 1 / 3; }
  .crm-profile-grid { grid-template-columns: 260px 1fr; }
  .crm-profile-right-col { grid-column: 1 / 3; flex-direction: row; }
  .ioc-layout { grid-template-columns: 230px 1fr; }
  .ioc-info-panel { display: none; }
}

@media (max-width: 900px) {
  .crm-overview-grid { grid-template-columns: 1fr; }
  .crm-chart-area { grid-column: 1; }
  .crm-profile-grid { grid-template-columns: 1fr; }
  .crm-profile-right-col { grid-column: 1; flex-direction: column; }
  .crm-ptab-panel { padding: 1rem; }
  .ioc-layout { grid-template-columns: 1fr; }
  .ioc-sidebar { display: none; }
}

/* ==========================================
   HRM REDESIGN STAFF LIST & DETAIL TABS
   ========================================== */

.hrm-staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}

.hrm-staff-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  overflow: hidden;
}

.hrm-staff-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.hrm-staff-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding-right: 4.5rem; /* Space for the badge */
}

.hrm-staff-card-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.hrm-staff-card-title {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hrm-staff-card-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hrm-staff-card-code {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
}

.hrm-staff-card-header .hrm-badge {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  margin: 0;
}

.hrm-staff-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-main);
  flex: 1;
}

.hrm-staff-card-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px dashed var(--border-light);
  padding-bottom: 0.35rem;
}

.hrm-staff-card-field:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.hrm-staff-card-field .field-label {
  color: var(--text-muted);
  font-weight: 500;
}

.hrm-staff-card-field .field-value {
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}

.hrm-staff-card-footer {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  border-top: 1px solid var(--border-light);
  padding-top: 0.75rem;
}

.hrm-card-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-main);
  cursor: pointer;
  transition: var(--transition-fast);
}

.hrm-card-btn:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}

.hrm-card-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.hrm-card-btn.danger:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.4);
  color: #EF4444;
}

/* Staff Portal Mode: hide admin-only menu items, show staff-only items */
.menu-item.staff-only { display: none; }
.staff-mode .menu-item.staff-only { display: flex !important; }
.staff-mode #menuItemBlogs,
.staff-mode #menuItemHRM { display: none !important; }

/* Staff portal tab buttons (mirrors .crmsp-tab) */
.sp-tab {
  padding: 1rem 1.1rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  border: none;
  background: none;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
  position: relative;
}
.sp-tab::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.sp-tab:hover { color: var(--text-main); background: var(--accent-light); }
.sp-tab.active { color: var(--accent); font-weight: 600; }
.sp-tab.active::after { width: 75%; }

/* Grid layout for tabs inside HRM and CRM Profile views */
.hrm-profile-tab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

/* ── Resume extras: photo + docs row ── */
.resume-extras-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.25rem;
  margin-top: 1.25rem;
  align-items: start;
}

/* Photo card */
.resume-photo-card .resume-photo-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding-top: 0.5rem;
}
.resume-photo-frame {
  width: 120px;
  height: 148px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-secondary, #F3F4F6);
  border: 2px dashed var(--border, #E5E7EB);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.resume-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.resume-photo-placeholder {
  font-size: 2.5rem;
  opacity: 0.35;
}
.resume-photo-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.resume-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 1rem;
  background: var(--color-accent, #A88B58);
  color: #fff;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.18s;
}
.resume-upload-btn:hover { opacity: 0.85; }
.resume-upload-btn svg { width: 14px; height: 14px; fill: currentColor; }
.resume-photo-hint {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
}

/* Docs card */
.resume-docs-card { display: flex; flex-direction: column; gap: 0.75rem; }
.resume-doc-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.85rem;
  background: #2563EB;
  color: #fff;
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.18s;
  white-space: nowrap;
}
.resume-doc-upload-btn:hover { opacity: 0.85; }
.resume-doc-upload-btn svg { width: 13px; height: 13px; fill: currentColor; }

.doc-upload-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 8px;
  font-size: 0.78rem;
  color: #1D4ED8;
}
.doc-upload-progress svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }

.docs-empty-cell {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
  font-size: 0.8rem;
}
.docs-empty-cell svg { width: 30px; height: 30px; fill: var(--border); display: block; margin: 0 auto 0.4rem; }

.crm-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
}
.crm-icon-btn:hover { background: var(--bg-secondary, #F3F4F6); }

@media (max-width: 700px) {
  .resume-extras-row { grid-template-columns: 1fr; }
}

/* ================================================================
   MOBILE OPTIMIZATION — 768px and below
   ================================================================ */

@media (max-width: 768px) {

  /* --- Staff Attendance Dashboard --- */
  #staff-attendance-dashboard {
    padding: 1rem !important;
    gap: 1rem !important;
  }

  .att-today-card {
    padding: 1.25rem 1rem;
    gap: 1rem;
  }

  .att-today-date {
    font-size: 0.8rem;
  }

  .att-time-row {
    gap: 1.5rem;
  }

  .att-time-value {
    font-size: 1.55rem;
  }

  .att-btn-row {
    width: 100%;
    flex-direction: column;
    gap: 0.6rem;
  }

  .att-btn {
    width: 100%;
    justify-content: center;
    padding: 0.7rem 1rem;
    font-size: 0.85rem;
  }

  .att-kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }

  .att-kpi-box {
    padding: 0.7rem 0.5rem;
  }

  .att-kpi-val   { font-size: 1.4rem; }
  .att-kpi-label { font-size: 0.68rem; }

  /* Bảng tháng: thu nhỏ font, fix cột */
  .att-month-table th,
  .att-month-table td {
    font-size: 0.72rem;
    padding: 0.5rem 0.4rem;
  }

  .att-month-table .att-col-date { width: 36px; }
  .att-month-table .att-col-dow  { width: 30px; }
  .att-month-table .att-col-time { width: 58px; }

  .att-badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.45rem;
  }

  /* Staff profile dashboard */
  #staff-profile-dashboard {
    padding: 1rem !important;
  }

  /* Tables chung */
  .financial-table th,
  .financial-table td {
    font-size: 0.72rem;
    padding: 0.55rem 0.5rem;
  }

  /* Section header */
  .hrm-section-header {
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  .hrm-section-title {
    font-size: 0.78rem;
  }

  /* Toast */
  #toastContainer {
    bottom: 1rem !important;
    right: 0.75rem !important;
    left: 0.75rem !important;
    width: auto !important;
  }

  .toast {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 0.82rem;
  }

  /* HRM KPI grid 2 cột trên mobile */
  .hrm-kpi-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem;
  }

  /* Month input + nav */
  #attMonth {
    font-size: 0.8rem;
    padding: 0.4rem 0.5rem;
  }
}

/* ================================================================
   XS — 480px và nhỏ hơn (iPhone SE, Android nhỏ)
   ================================================================ */

@media (max-width: 480px) {

  #staff-attendance-dashboard {
    padding: 0.75rem !important;
  }

  .att-today-card {
    padding: 1rem 0.75rem;
  }

  .att-time-value {
    font-size: 1.35rem;
  }

  .att-time-row {
    gap: 1rem;
  }

  /* KPI 2 cột giữ nguyên nhưng nhỏ hơn */
  .att-kpi-val   { font-size: 1.2rem; }
  .att-kpi-label { font-size: 0.63rem; }

  /* Bảng tháng rất nhỏ */
  .att-month-table th,
  .att-month-table td {
    font-size: 0.65rem;
    padding: 0.4rem 0.25rem;
  }

  .att-badge {
    font-size: 0.6rem;
    padding: 0.1rem 0.3rem;
  }

  /* Ẩn cột Giờ ra trên màn hình cực nhỏ để bảng vừa */
  .att-month-table .att-col-time:last-of-type {
    display: none;
  }

  /* Topbar title */
  .dashboard-topbar h2,
  .dashboard-topbar .page-title {
    font-size: 1rem;
  }

  /* Modal full screen */
  .modal-overlay > .login-card {
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* HRM KPI 1 cột trên phone rất nhỏ */
  .hrm-kpi-grid {
    grid-template-columns: 1fr !important;
  }

  .att-kpi-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   TEST NĂNG LỰC
   ========================================================================== */
.competency-test-header {
  margin-bottom: 1.5rem;
}
.competency-test-header h3 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-text-main);
  margin-bottom: 0.25rem;
}
.competency-test-header p {
  font-size: 0.82rem;
  color: #6B6A67;
}
.competency-progress-bar {
  height: 4px;
  background: #E8E5DF;
  border-radius: 2px;
  margin-bottom: 1.75rem;
  overflow: hidden;
}
.competency-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366F1, #A88B58);
  border-radius: 2px;
  transition: width 0.35s ease;
}
.competency-q-block {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.competency-q-num {
  font-size: 0.72rem;
  font-weight: 600;
  color: #A88B58;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.competency-q-text {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-main);
  margin-bottom: 0.85rem;
  line-height: 1.5;
}
.competency-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.competency-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.85rem;
  border: 1.5px solid #E8E5DF;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  font-size: 0.85rem;
  color: var(--color-text-main);
  background: #FAFAF9;
  -webkit-user-select: none;
  user-select: none;
}
.competency-option:hover {
  border-color: #6366F1;
  background: #EEF2FF;
  color: #4338CA;
}
.competency-option.selected {
  border-color: #6366F1;
  background: #EEF2FF;
  color: #4338CA;
  font-weight: 500;
}
.competency-option input[type="radio"] {
  display: none;
}
.competency-option-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #C7C5C0;
  flex-shrink: 0;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.competency-option.selected .competency-option-dot {
  border-color: #6366F1;
  background: #6366F1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.competency-option.selected .competency-option-dot::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}
.competency-submit-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  margin-top: 1rem;
}
.competency-submit-btn {
  padding: 0.7rem 2rem;
  background: #6366F1;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.15s ease;
  letter-spacing: 0.03em;
}
.competency-submit-btn:hover:not(:disabled) {
  background: #4F46E5;
  transform: translateY(-1px);
}
.competency-submit-btn:disabled {
  background: #C7C5C0;
  cursor: not-allowed;
}
.competency-answered-count {
  font-size: 0.82rem;
  color: #6B6A67;
}
.competency-result-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  text-align: center;
  max-width: 480px;
  margin: 2rem auto;
}
.competency-result-score {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.competency-result-label {
  font-size: 1rem;
  color: #6B6A67;
  margin-bottom: 1.5rem;
}
.competency-result-badge {
  display: inline-block;
  padding: 0.35rem 1rem;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
}
/* Admin test filter buttons */
.test-dept-filter,
.test-result-filter {
  padding: 0.3rem 0.85rem;
  border: 1.5px solid #E8E5DF;
  border-radius: 20px;
  background: #fff;
  font-size: 0.76rem;
  color: #6B6A67;
  cursor: pointer;
  transition: all 0.15s ease;
}
.test-dept-filter:hover, .test-dept-filter.active,
.test-result-filter:hover, .test-result-filter.active {
  border-color: #6366F1;
  background: #EEF2FF;
  color: #4338CA;
  font-weight: 600;
}

/* Admin test tab bar */
.test-admin-tabs {
  display: flex;
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid #E8E5DF;
  background: #F5F4F2;
}
.test-admin-tab {
  padding: 0.5rem 1.1rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #6B6A67;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.test-admin-tab.active {
  background: #fff;
  color: #4338CA;
  font-weight: 600;
  box-shadow: inset 0 0 0 1.5px #6366F1;
}
.test-admin-panel {
  display: none;
}
.test-admin-panel.active-panel {
  display: flex;
}

/* Exam list cards */
.exam-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.exam-card:hover {
  border-color: #C7C5FF;
  box-shadow: 0 2px 12px rgba(99,102,241,0.08);
}
.exam-card.is-active-exam {
  border-color: #6366F1;
  background: #FAFAFE;
}
.exam-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.exam-dept-tag {
  display: inline-block;
  padding: 0.15rem 0.65rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  width: fit-content;
}
.exam-card-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exam-card-meta {
  font-size: 0.75rem;
  color: #6B6A67;
}
.exam-card-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.exam-active-badge {
  font-size: 0.73rem;
  font-weight: 700;
  color: #10B981;
  background: #ECFDF5;
  border: 1px solid #6EE7B7;
  padding: 0.25rem 0.7rem;
  border-radius: 20px;
  letter-spacing: 0.03em;
}
.exam-btn {
  padding: 0.3rem 0.8rem;
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.14s ease;
}
.exam-btn-view {
  background: #F5F4F2;
  border-color: #E8E5DF;
  color: #6B6A67;
}
.exam-btn-view:hover {
  background: #E8E5DF;
  color: #1A1A1A;
}
.exam-btn-edit {
  background: #EEF2FF;
  border-color: #C7C5FF;
  color: #4338CA;
}
.exam-btn-edit:hover {
  background: #E0E7FF;
}
.exam-btn-activate {
  background: #F5F4F2;
  border-color: #D1D5DB;
  color: #6B6A67;
}
.exam-btn-activate:hover {
  background: #ECFDF5;
  border-color: #6EE7B7;
  color: #059669;
}
.exam-btn-activate.is-on {
  background: #ECFDF5;
  border-color: #6EE7B7;
  color: #059669;
  font-weight: 600;
}
.exam-btn-activate.is-on:hover {
  background: #FEF2F2;
  border-color: #FCA5A5;
  color: #DC2626;
}
.exam-btn-delete {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #DC2626;
}
.exam-btn-delete:hover {
  background: #FEE2E2;
}

/* Question count selector (inside create modal) */
.exam-qcount-btn {
  padding: 0.3rem 0.85rem;
  border: 1.5px solid #E8E5DF;
  border-radius: 20px;
  background: #fff;
  font-size: 0.78rem;
  font-weight: 500;
  color: #6B6A67;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.exam-qcount-btn:hover:not(:disabled) {
  border-color: #6366F1;
  color: #6366F1;
  background: #F5F3FF;
}
.exam-qcount-btn.active {
  border-color: #6366F1;
  background: #EEF2FF;
  color: #4338CA;
  font-weight: 700;
}
.exam-qcount-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Question builder blocks (inside modal) */
.exam-q-builder {
  background: #FAFAF9;
  border: 1.5px solid #E8E5DF;
  border-radius: 10px;
  padding: 1rem 1.1rem;
  transition: border-color 0.15s ease;
}
.exam-q-builder:focus-within {
  border-color: #A5B4FC;
  background: #fff;
}
.exam-q-builder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.exam-q-num-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #6366F1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.exam-q-text-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.75rem;
  border: 1.5px solid #E8E5DF;
  border-radius: 7px;
  font-size: 0.85rem;
  color: var(--color-text-main);
  background: #fff;
  resize: vertical;
  min-height: 56px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  margin-bottom: 0.6rem;
  transition: border-color 0.15s ease;
}
.exam-q-text-input:focus {
  outline: none;
  border-color: #6366F1;
}
.exam-q-opt-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.exam-q-opt-radio {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
}
.exam-q-opt-radio input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: #10B981;
  cursor: pointer;
}
.exam-q-opt-letter {
  font-size: 0.75rem;
  font-weight: 700;
  color: #6B6A67;
  width: 18px;
  flex-shrink: 0;
  text-align: center;
}
.exam-q-opt-input {
  flex: 1;
  padding: 0.4rem 0.65rem;
  border: 1.5px solid #E8E5DF;
  border-radius: 6px;
  font-size: 0.82rem;
  background: #fff;
  color: var(--color-text-main);
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: border-color 0.15s ease;
}
.exam-q-opt-input:focus {
  outline: none;
  border-color: #6366F1;
}
.exam-q-opt-row.is-correct .exam-q-opt-input {
  border-color: #6EE7B7;
  background: #F0FDF4;
}
.exam-q-correct-hint {
  font-size: 0.68rem;
  color: #6B6A67;
  margin-top: 0.2rem;
}

/* View modal question rows */
.exam-view-q {
  background: #FAFAF9;
  border: 1px solid #E8E5DF;
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
}
.exam-view-q-num {
  font-size: 0.7rem;
  font-weight: 700;
  color: #6366F1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.exam-view-q-text {
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--color-text-main);
  margin-bottom: 0.6rem;
  line-height: 1.5;
}
.exam-view-opt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  margin-bottom: 0.3rem;
  color: var(--color-text-main);
}
.exam-view-opt.correct-opt {
  background: #ECFDF5;
  color: #059669;
  font-weight: 600;
}
.exam-view-opt-letter {
  font-size: 0.72rem;
  font-weight: 700;
  width: 20px;
  flex-shrink: 0;
}

/* Test detail view (admin sees staff answers) */
.td-q-block {
  background: #FAFAF9;
  border: 1px solid #E8E5DF;
  border-radius: 10px;
  padding: 0.85rem 1rem;
}
.td-q-result-icon {
  font-size: 0.85rem;
  margin-right: 0.35rem;
}

/* Topbar right slot — flex so bell and user badge sit side by side */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* ==========================================================================
   NOTIFICATION BELL — inline in each topbar, injected by JS
   ========================================================================== */

/* Bell button (inline inside topbar-right / hrm-profile-header-actions) */
.topbar-notif-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, opacity 0.15s;
  color: #6B6A67;
  padding: 0;
  flex-shrink: 0;
}
.topbar-notif-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  opacity: 0.85;
}

/* Bell icon wrapper — the element that rotates */
.global-notif-bell-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: top center;
}

/* Ring animation */
@keyframes bell-ring {
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(20deg); }
  20%  { transform: rotate(-17deg); }
  30%  { transform: rotate(13deg); }
  40%  { transform: rotate(-9deg); }
  50%  { transform: rotate(5deg); }
  60%  { transform: rotate(-2deg); }
  70%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.topbar-notif-btn.bell-ringing .global-notif-bell-icon {
  animation: bell-ring 0.65s cubic-bezier(0.36,0.07,0.19,0.97);
}

/* Badge */
.notif-badge {
  display: none;
  position: absolute;
  top: -3px;
  right: -4px;
  background: #EF4444;
  color: #fff;
  font-size: 0.5rem;
  font-weight: 700;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  border: 1.5px solid #fff;
  animation: badge-pop 0.3s ease;
}
@keyframes badge-pop {
  0%   { transform: scale(0.6); }
  70%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Dropdown panel — fixed, floats below the 80px topbar */
#notifDropdown {
  display: none;
  position: fixed;
  top: 84px;
  right: 18px;
  width: 320px;
  z-index: 9999;
  background: #fff;
  border: 1.5px solid #E8E5DF;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.14);
  overflow: hidden;
  flex-direction: column;
  max-height: 380px;
}
#notifDropdown.open {
  display: flex;
}
.notif-dropdown-header {
  padding: 0.9rem 1.1rem 0.65rem;
  border-bottom: 1px solid #F0EDE8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.notif-dropdown-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #1A1A1A;
  letter-spacing: 0.06em;
}
.notif-dropdown-header button {
  font-size: 0.72rem;
  color: #6366F1;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
}
#notifList {
  overflow-y: auto;
  flex: 1;
  padding: 0.3rem 0;
}
.notif-empty {
  padding: 1.5rem;
  text-align: center;
  color: #6B6A67;
  font-size: 0.82rem;
}

/* Notification items */
.notif-item {
  display: flex;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F5F4F2;
  cursor: pointer;
  transition: background 0.12s ease;
  align-items: flex-start;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover      { background: #FAFAF9; }
.notif-item.unread     { background: #EEF2FF; }
.notif-item.unread:hover { background: #E0E7FF; }
.notif-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366F1, #818CF8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
}
.notif-body { flex: 1; min-width: 0; }
.notif-msg {
  font-size: 0.78rem;
  color: #1A1A1A;
  line-height: 1.45;
  margin-bottom: 0.2rem;
}
.notif-time {
  font-size: 0.68rem;
  color: #6B6A67;
}
.notif-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6366F1;
  flex-shrink: 0;
  margin-top: 5px;
}

/* Flight date input in student table */
.flight-date-input {
  border: 1.5px solid #E8E5DF;
  border-radius: 7px;
  padding: 0.28rem 0.45rem;
  font-size: 0.76rem;
  color: #1A1A1A;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease;
  width: 115px;
}
.flight-date-input:focus {
  outline: none;
  border-color: #6366F1;
}
.flight-date-input.has-date {
  border-color: #6EE7B7;
  background: #F0FDF4;
  color: #059669;
  font-weight: 600;
}

/* ══════════════════════════════════════
   QUY TRÌNH v2 — WORKFLOW DASHBOARD
══════════════════════════════════════ */

/* ── Page shell ── */
.wf2-root { display:flex; flex-direction:column; height:100%; overflow:hidden; padding:0; }

.wf2-page-header {
  display:flex; align-items:flex-end; justify-content:space-between;
  padding: 1rem 1.5rem 0; border-bottom:1px solid var(--color-border,#E8E5DF);
  background: var(--bg-card,#fff); flex-shrink:0;
}
.wf2-header-left { display:flex; flex-direction:column; gap:0; }
.wf2-page-title  { font-size:1.15rem; font-weight:700; color:var(--color-text-main,#1A1A1A); margin:0 0 .75rem; }
.wf2-header-right{ display:flex; gap:.6rem; align-items:center; padding-bottom:.75rem; }

.wf2-tabs { display:flex; gap:0; }
.wf2-tab {
  padding:.55rem 1.1rem; border:none; background:none; cursor:pointer;
  font-size:.84rem; font-weight:500; color:#6B7280;
  border-bottom:2px solid transparent; transition:.15s;
  font-family:inherit;
}
.wf2-tab.active { color:#1D4ED8; border-bottom-color:#1D4ED8; font-weight:600; }
.wf2-tab:hover:not(.active) { color:var(--color-text-main,#1A1A1A); }

.wf2-btn-guide {
  display:flex; align-items:center; gap:.4rem;
  border:1px solid var(--color-border,#E8E5DF); border-radius:7px;
  padding:.45rem .9rem; font-size:.8rem; background:var(--bg-card,#fff);
  cursor:pointer; color:var(--color-text-muted,#6B6A67); font-family:inherit;
}
.wf2-btn-guide:hover { border-color:#6B7280; color:#1A1A1A; }
.wf2-btn-primary {
  display:flex; align-items:center; gap:.4rem;
  background:#1D4ED8; color:#fff; border:none; border-radius:7px;
  padding:.48rem 1rem; font-size:.82rem; font-weight:600; cursor:pointer; font-family:inherit;
}
.wf2-btn-primary:hover { background:#1E40AF; }

/* ── Panels ── */
.wf2-panel { flex:1; overflow:hidden; display:flex; flex-direction:column; }

/* ── List tab ── */
.wf2-list-toolbar {
  display:flex; gap:.75rem; padding:1rem 1.5rem;
  border-bottom:1px solid var(--color-border,#E8E5DF); flex-shrink:0;
  background:var(--bg-card,#fff);
}
.wf2-list-search { flex:1; padding:.5rem .75rem; border:1px solid var(--color-border,#E8E5DF); border-radius:7px; font-size:.82rem; outline:none; background:var(--bg-primary,#FAF8F5); color:var(--color-text-main,#1A1A1A); font-family:inherit; }
.wf2-list-search:focus { border-color:#1D4ED8; }
.wf2-list-cat { padding:.5rem .75rem; border:1px solid var(--color-border,#E8E5DF); border-radius:7px; font-size:.82rem; background:var(--bg-primary,#FAF8F5); outline:none; font-family:inherit; cursor:pointer; }

.wf2-list-grid {
  flex:1; overflow-y:auto; padding:1.25rem 1.5rem;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:1rem; align-content:start;
}
.wf2-card {
  background:var(--bg-card,#fff); border:1px solid var(--color-border,#E8E5DF);
  border-radius:10px; padding:1rem 1.1rem; cursor:pointer; transition:.15s;
}
.wf2-card:hover { border-color:#1D4ED8; box-shadow:0 2px 12px rgba(29,78,216,.08); }
.wf2-card-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:.5rem; }
.wf2-card-name { font-size:.9rem; font-weight:700; color:var(--color-text-main,#1A1A1A); line-height:1.3; }
.wf2-card-actions { display:flex; gap:.3rem; }
.wf2-card-action-btn {
  background:none; border:none; cursor:pointer; color:#9CA3AF; padding:.2rem .3rem;
  border-radius:5px; font-size:.9rem; transition:.12s; line-height:1;
}
.wf2-card-action-btn:hover { background:#F3F4F6; color:#374151; }
.wf2-card-meta { font-size:.75rem; color:#6B7280; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.wf2-badge { font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:20px; }
.wf2-badge.active   { background:rgba(16,185,129,.1); color:#059669; }
.wf2-badge.draft    { background:rgba(245,158,11,.12); color:#D97706; }
.wf2-badge.archived { background:rgba(107,114,128,.1); color:#4B5563; }
.wf2-badge.expired    { background:rgba(239,68,68,.1); color:#DC2626; }
.wf2-badge.completed  { background:rgba(99,102,241,.1); color:#4F46E5; }

/* ── Editor form row ── */
.wf2-form-row {
  display:flex; gap:.75rem; align-items:flex-end;
  padding:.75rem 1rem; border-bottom:1px solid var(--color-border,#E8E5DF);
  background:var(--bg-card,#fff); flex-shrink:0; flex-wrap:wrap;
}
.wf2-form-field { display:flex; flex-direction:column; gap:.25rem; min-width:120px; }
.wf2-field-name { flex:2; }
.wf2-field-desc { flex:3; }
.wf2-form-label { font-size:.7rem; font-weight:600; color:#6B7280; text-transform:uppercase; letter-spacing:.04em; }
.wf2-form-input {
  border:1px solid var(--color-border,#E8E5DF); border-radius:7px; padding:.45rem .7rem;
  font-size:.82rem; background:var(--bg-primary,#FAF8F5); color:var(--color-text-main,#1A1A1A);
  outline:none; width:100%; box-sizing:border-box; font-family:inherit;
}
.wf2-form-input:focus { border-color:#1D4ED8; }
.wf2-form-actions { display:flex; gap:.5rem; align-items:flex-end; padding-bottom:2px; }
.wf2-btn-cancel { border:1px solid var(--color-border,#E8E5DF); border-radius:7px; padding:.42rem .9rem; font-size:.8rem; background:none; cursor:pointer; color:#374151; font-family:inherit; }
.wf2-btn-cancel:hover { background:#F3F4F6; }
.wf2-btn-save-wf { background:#1D4ED8; color:#fff; border:none; border-radius:7px; padding:.42rem 1rem; font-size:.8rem; font-weight:600; cursor:pointer; font-family:inherit; }
.wf2-btn-save-wf:hover { background:#1E40AF; }

/* Toggle switch */
.wf2-toggle-wrap { display:flex; align-items:center; gap:.5rem; cursor:pointer; padding:.45rem 0; }
.wf2-toggle-wrap input { display:none; }
.wf2-toggle-track { width:36px; height:20px; border-radius:10px; background:#D1D5DB; position:relative; transition:.2s; flex-shrink:0; }
.wf2-toggle-thumb { position:absolute; width:16px; height:16px; border-radius:50%; background:#fff; top:2px; left:2px; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.wf2-toggle-wrap input:checked ~ .wf2-toggle-track { background:#10B981; }
.wf2-toggle-wrap input:checked ~ .wf2-toggle-track .wf2-toggle-thumb { left:18px; }
.wf2-toggle-label { font-size:.8rem; font-weight:600; color:#059669; white-space:nowrap; }

/* ── Editor body (4 cols) ── */
.wf2-editor-body {
  flex:1; display:grid; overflow:hidden;
  grid-template-columns: 185px 1fr 268px 260px;
}

/* ── Col 1: Palette ── */
.wf2-palette {
  border-right:1px solid var(--color-border,#E8E5DF);
  display:flex; flex-direction:column; overflow-y:auto;
  background:var(--bg-card,#fff); padding:.75rem .6rem;
}
.wf2-palette-title { font-size:.68rem; font-weight:700; color:#6B7280; text-transform:uppercase; letter-spacing:.08em; padding:.25rem .4rem .75rem; }
.wf2-palette-item {
  display:flex; align-items:flex-start; gap:.55rem;
  padding:.55rem .5rem; border-radius:7px; cursor:pointer; transition:.12s;
  border:1px solid transparent; margin-bottom:2px;
}
.wf2-palette-item:hover { background:#F8FAFC; border-color:var(--color-border,#E8E5DF); }
.wf2-palette-icon { flex-shrink:0; padding-top:1px; }
.wf2-palette-name { font-size:.78rem; font-weight:600; color:var(--color-text-main,#1A1A1A); margin-bottom:1px; }
.wf2-palette-desc { font-size:.68rem; color:#6B7280; line-height:1.3; }
.wf2-minimap-wrap { margin-top:auto; padding:.5rem .25rem 0; }
.wf2-minimap { width:100%; border-radius:6px; border:1px solid var(--color-border,#E8E5DF); display:block; background:#F8FAFC; }
.wf2-minimap-hint { font-size:.65rem; color:#9CA3AF; text-align:center; line-height:1.35; margin:.5rem 0 0; }

/* ── Col 2: Canvas ── */
.wf2-canvas-wrap {
  display:flex; flex-direction:column; overflow:hidden;
  border-right:1px solid var(--color-border,#E8E5DF); background:#F8FAFC;
}
.wf2-canvas-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:.45rem .85rem; border-bottom:1px solid var(--color-border,#E8E5DF);
  background:var(--bg-card,#fff); gap:.5rem; flex-shrink:0;
}
.wf2-tb-left, .wf2-tb-right { display:flex; gap:.3rem; align-items:center; }
.wf2-tb-btn {
  display:flex; align-items:center; gap:.3rem;
  border:1px solid var(--color-border,#E8E5DF); border-radius:6px;
  padding:.3rem .55rem; font-size:.75rem; background:var(--bg-card,#fff);
  cursor:pointer; color:#374151; transition:.12s; font-family:inherit;
}
.wf2-tb-btn:hover { border-color:#6B7280; background:#F9FAFB; }
.wf2-zoom-label { font-size:.75rem; font-weight:600; color:#374151; padding:0 .2rem; min-width:36px; text-align:center; }
.wf2-tb-save { background:#1D4ED8; color:#fff; border-color:#1D4ED8; font-weight:600; }
.wf2-tb-save:hover { background:#1E40AF; border-color:#1E40AF; }

.wf2-canvas-scroll { flex:1; overflow:auto; cursor:grab; }
.wf2-canvas-scroll:active { cursor:grabbing; }
.wf2-canvas { position:relative; min-width:600px; min-height:800px; background-image:radial-gradient(circle,#D1D5DB 1px,transparent 1px); background-size:20px 20px; }
.wf2-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.wf2-nodes { position:absolute; inset:0; }

/* ── Canvas Nodes ── */
.wf2-node {
  position:absolute; cursor:pointer; user-select:none;
  transition:box-shadow .15s;
}
.wf2-node-start, .wf2-node-end {
  display:flex; align-items:center; gap:.4rem;
  padding:.4rem 1.4rem; border-radius:20px; font-size:.78rem; font-weight:700;
  letter-spacing:.04em; white-space:nowrap; box-shadow:0 1px 4px rgba(0,0,0,.1);
}
.wf2-node-start { background:#D1FAE5; color:#065F46; border:1px solid #6EE7B7; }
.wf2-node-end   { background:#FEE2E2; color:#991B1B; border:1px solid #FCA5A5; }

.wf2-node-card {
  width:240px; background:#fff; border:1.5px solid #E2E8F0; border-radius:9px;
  box-shadow:0 1px 4px rgba(0,0,0,.07); overflow:hidden; transition:border-color .15s, box-shadow .15s;
}
.wf2-node-card:hover { border-color:#1D4ED8; box-shadow:0 3px 12px rgba(29,78,216,.12); }
.wf2-node-card.selected { border-color:#1D4ED8; box-shadow:0 0 0 3px rgba(29,78,216,.15); }
.wf2-node-card.done   { border-color:#10B981; border-left:3px solid #10B981; background:rgba(16,185,129,.04); }
.wf2-node-card.active-step { border-color:#3B82F6; box-shadow:0 0 0 3px rgba(59,130,246,.12); }
.wf2-node-card.blocked { border-color:#EF4444; }

.wf2-node-card-head {
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .7rem; border-bottom:1px solid #F1F5F9;
}
.wf2-node-num {
  min-width:22px; height:22px; border-radius:5px;
  background:#1D4ED8; color:#fff; font-size:.65rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.wf2-node-card.done   .wf2-node-num { background:#10B981; }
.wf2-node-card.active-step .wf2-node-num { background:#3B82F6; }
.wf2-node-card.blocked .wf2-node-num { background:#EF4444; }
.wf2-node-title { font-size:.8rem; font-weight:600; color:#1E293B; flex:1; line-height:1.25; }
.wf2-node-type-icon { font-size:.85rem; opacity:.7; }

/* Drag handle on node card */
.wf2-drag-handle {
  font-size:.9rem; color:#CBD5E1; cursor:grab; flex-shrink:0;
  padding:0 2px; line-height:1; user-select:none;
  transition:color .15s;
}
.wf2-drag-handle:hover { color:#94A3B8; }
.wf2-drag-handle:active { cursor:grabbing; }
.wf2-node-card.wf2-dragging-src { opacity:.3; pointer-events:none; }
.wf2-drop-indicator { transition:top .08s; }

/* Corner action stack (✓ + ×) — absolutely anchored top-right of card */
.wf2-node-card { overflow:visible; }
.wf2-node-corner {
  position:absolute; top:6px; right:-8px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  pointer-events:none;
}
.wf2-node-corner > * { pointer-events:all; }
.wf2-node-corner-spacer { width:18px; height:18px; }

/* Delete button — muted by default, red on hover */
.wf2-node-del-btn {
  width:18px; height:18px; border-radius:5px; border:none;
  background:rgba(0,0,0,.07); color:#C4C9D4;
  font-size:.8rem; font-weight:800; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
  transition:background .15s, color .15s, transform .1s;
}
.wf2-node-del-btn:hover { background:#FEE2E2; color:#EF4444; transform:scale(1.1); }

/* Insert-after button in arrow gap */
.wf2-node-insert { pointer-events:none; }
.wf2-insert-btn {
  width:22px; height:22px; border-radius:50%;
  background:#fff; border:2px solid #CBD5E1; color:#94A3B8;
  font-size:1rem; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
  pointer-events:all;
  opacity:.45; transition:opacity .15s, border-color .15s, color .15s, box-shadow .15s;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.wf2-insert-btn:hover { opacity:1; border-color:#6366F1; color:#6366F1; box-shadow:0 2px 8px rgba(99,102,241,.2); }
.wf2-node-done-icon {
  width:18px; height:18px; border-radius:5px;
  background:#10B981; color:#fff;
  font-size:.72rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; box-shadow:0 0 0 2px rgba(16,185,129,.25);
  line-height:1;
}
.wf2-node-lock-icon { color:#9CA3AF; font-size:.8rem; }

.wf2-node-card-body { padding:.45rem .7rem; display:flex; flex-direction:column; gap:.2rem; }
.wf2-node-assignee { font-size:.71rem; color:#6B7280; display:flex; align-items:center; gap:.3rem; }
.wf2-node-desc-prev { font-size:.7rem; color:#94A3B8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wf2-node-check-row { display:flex; gap:.25rem; flex-wrap:wrap; margin-top:.1rem; }
.wf2-node-check-dot { width:7px; height:7px; border-radius:50%; background:#E2E8F0; }
.wf2-node-check-dot.done { background:#10B981; }
.wf2-node-deadline { font-size:.68rem; color:#F59E0B; font-weight:600; }

/* Condition diamond */
.wf2-node-diamond-wrap { position:absolute; display:flex; align-items:center; justify-content:center; }
.wf2-node-diamond {
  width:80px; height:80px; background:#FEF3C7; border:2px solid #F59E0B;
  transform:rotate(45deg); border-radius:6px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:.15s; box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.wf2-node-diamond:hover { border-color:#D97706; box-shadow:0 3px 10px rgba(245,158,11,.2); }
.wf2-node-diamond.selected { border-color:#D97706; box-shadow:0 0 0 3px rgba(245,158,11,.2); }
.wf2-node-diamond-inner { transform:rotate(-45deg); text-align:center; padding:4px; }
.wf2-node-diamond-text { font-size:.65rem; font-weight:700; color:#92400E; line-height:1.2; }
.wf2-branch-yes { position:absolute; right:-28px; top:50%; transform:translateY(-50%); font-size:.65rem; font-weight:700; color:#10B981; background:#D1FAE5; padding:1px 5px; border-radius:4px; white-space:nowrap; }
.wf2-branch-no  { position:absolute; left:-30px; top:50%; transform:translateY(-50%); font-size:.65rem; font-weight:700; color:#EF4444; background:#FEE2E2; padding:1px 5px; border-radius:4px; white-space:nowrap; }

/* Reject branch node */
.wf2-node-reject {
  width:180px; background:#FFF7ED; border:1.5px solid #F97316;
  border-radius:9px; overflow:hidden; cursor:pointer; transition:.15s;
  box-shadow:0 1px 4px rgba(0,0,0,.07);
}
.wf2-node-reject:hover { border-color:#EA580C; box-shadow:0 3px 10px rgba(249,115,22,.15); }
.wf2-node-reject.selected { border-color:#EA580C; box-shadow:0 0 0 3px rgba(249,115,22,.15); }
.wf2-node-reject-head { display:flex; align-items:center; gap:.4rem; padding:.4rem .6rem; border-bottom:1px solid #FED7AA; }
.wf2-node-reject-num { min-width:22px; height:18px; border-radius:4px; background:#F97316; color:#fff; font-size:.6rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.wf2-node-reject-title { font-size:.74rem; font-weight:600; color:#7C2D12; }
.wf2-node-reject-body { padding:.3rem .6rem; }
.wf2-node-reject-assignee { font-size:.68rem; color:#9A3412; }

/* ── Col 3: Step detail ── */
.wf2-detail-col {
  display:flex; flex-direction:column; overflow:hidden;
  border-right:1px solid var(--color-border,#E8E5DF); background:var(--bg-card,#fff);
}
.wf2-detail-hd { font-size:.68rem; font-weight:700; color:#6B7280; text-transform:uppercase; letter-spacing:.08em; padding:.75rem 1rem; border-bottom:1px solid var(--color-border,#E8E5DF); flex-shrink:0; }
.wf2-detail-body { flex:1; overflow-y:auto; padding:.75rem; display:flex; flex-direction:column; gap:.75rem; }
.wf2-detail-foot { padding:.65rem .75rem; border-top:1px solid var(--color-border,#E8E5DF); display:flex; justify-content:space-between; align-items:center; gap:.5rem; flex-shrink:0; }
.wf2-empty-detail { display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:2.5rem 1rem; color:#94A3B8; font-size:.8rem; text-align:center; }

.wf2-detail-field { display:flex; flex-direction:column; gap:.3rem; }
.wf2-detail-label { font-size:.68rem; font-weight:700; color:#6B7280; text-transform:uppercase; letter-spacing:.05em; }
.wf2-detail-input {
  border:1px solid #E2E8F0; border-radius:7px; padding:.45rem .65rem; font-size:.8rem;
  background:#F8FAFC; color:#1E293B; width:100%; box-sizing:border-box; outline:none; font-family:inherit;
}
.wf2-detail-input:focus { border-color:#1D4ED8; background:#fff; }
.wf2-detail-textarea { resize:vertical; min-height:72px; }
.wf2-detail-select { appearance:auto; cursor:pointer; }

.wf2-detail-assignee-wrap { position:relative; display:flex; align-items:center; }
.wf2-detail-assignee-wrap input { padding-left:2rem; }
.wf2-detail-assignee-icon { position:absolute; left:.6rem; color:#6B7280; font-size:.8rem; pointer-events:none; }
.wf2-detail-assignee-clear { position:absolute; right:.5rem; background:none; border:none; color:#9CA3AF; cursor:pointer; font-size:.85rem; }

.wf2-checklist { display:flex; flex-direction:column; gap:.35rem; }
.wf2-check-row { display:flex; align-items:center; gap:.4rem; }
.wf2-check-row input[type="checkbox"] { accent-color:#1D4ED8; cursor:pointer; flex-shrink:0; }
.wf2-check-inp { flex:1; border:none; border-bottom:1px solid #E2E8F0; padding:2px 4px; font-size:.78rem; outline:none; background:transparent; color:#1E293B; }
.wf2-check-inp:focus { border-bottom-color:#1D4ED8; }
.wf2-check-del { background:none; border:none; color:#EF4444; cursor:pointer; font-size:.75rem; padding:0; opacity:.7; }
.wf2-check-del:hover { opacity:1; }
.wf2-add-check { background:none; border:1px dashed #CBD5E1; border-radius:6px; padding:.3rem .6rem; font-size:.73rem; cursor:pointer; color:#64748B; transition:.12s; margin-top:2px; }
.wf2-add-check:hover { border-color:#1D4ED8; color:#1D4ED8; }

.wf2-btn-del-step { display:flex; align-items:center; gap:.3rem; background:none; border:1px solid #FCA5A5; border-radius:7px; padding:.38rem .75rem; font-size:.77rem; cursor:pointer; color:#EF4444; font-family:inherit; }
.wf2-btn-del-step:hover { background:#FEF2F2; }
.wf2-btn-update-step { background:#1D4ED8; color:#fff; border:none; border-radius:7px; padding:.38rem .9rem; font-size:.77rem; font-weight:600; cursor:pointer; font-family:inherit; }
.wf2-btn-update-step:hover { background:#1E40AF; }

/* ── Condition extra fields ── */
.wf2-detail-divider { height:1px; background:var(--color-border,#E8E5DF); margin:0.2rem 0; }
.wf2-detail-section-title { font-size:.67rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:#F59E0B; padding:.15rem 0; }

/* ── Undo/Redo disabled state ── */
#wf2BtnUndo:disabled, #wf2BtnRedo:disabled { opacity:.3; cursor:not-allowed; }

/* ── Preview overlay step list ── */
.wf2-preview-step {
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.75rem 1rem; border-radius:10px;
  border:1px solid var(--color-border,#E8E5DF);
  background:var(--bg-primary,#FAF8F5);
  transition:background 0.15s;
}
.wf2-preview-step.done { border-color:#BBF7D0; background:#F0FDF4; }
.wf2-preview-step.active-step { border-color:#BFDBFE; background:#EFF6FF; }
.wf2-preview-step.blocked { border-color:#FECACA; background:#FEF2F2; }
.wf2-preview-step-num { font-size:.68rem; font-weight:700; color:var(--color-text-muted,#6B6A67); min-width:22px; padding-top:2px; }
.wf2-preview-step-body { flex:1; }
.wf2-preview-step-name { font-size:.87rem; font-weight:600; color:var(--color-text-main,#1A1A1A); margin-bottom:2px; }
.wf2-preview-step-meta { font-size:.72rem; color:var(--color-text-muted,#6B6A67); }
.wf2-preview-step-icon { font-size:1rem; flex-shrink:0; }

/* ── Col 4: Side list ── */
.wf2-side-list-col { display:flex; flex-direction:column; overflow:hidden; background:var(--bg-card,#fff); }
.wf2-side-list-hd { font-size:.68rem; font-weight:700; color:#6B7280; text-transform:uppercase; letter-spacing:.08em; padding:.75rem 1rem; border-bottom:1px solid var(--color-border,#E8E5DF); flex-shrink:0; }
.wf2-side-list-search { padding:.6rem; border-bottom:1px solid var(--color-border,#E8E5DF); flex-shrink:0; }
.wf2-side-search-inp { width:100%; padding:.4rem .6rem; border:1px solid #E2E8F0; border-radius:6px; font-size:.77rem; outline:none; box-sizing:border-box; background:#F8FAFC; font-family:inherit; }
.wf2-side-search-inp:focus { border-color:#1D4ED8; }
.wf2-side-cat-wrap { padding:.4rem .6rem; border-bottom:1px solid var(--color-border,#E8E5DF); flex-shrink:0; }
.wf2-side-cat-sel { width:100%; padding:.38rem .6rem; border:1px solid #E2E8F0; border-radius:6px; font-size:.77rem; outline:none; background:#F8FAFC; font-family:inherit; cursor:pointer; }
.wf2-side-list-body { flex:1; overflow-y:auto; }
.wf2-side-item {
  padding:.7rem .9rem; border-bottom:1px solid #F1F5F9; cursor:pointer; transition:.12s;
  border-left:3px solid transparent;
}
.wf2-side-item:hover { background:#F8FAFC; }
.wf2-side-item.active { border-left-color:#1D4ED8; background:rgba(29,78,216,.04); }
.wf2-side-item-name { font-size:.8rem; font-weight:600; color:#1E293B; margin-bottom:3px; line-height:1.3; }
.wf2-side-item-row { display:flex; align-items:center; justify-content:space-between; }
.wf2-side-item-meta { font-size:.68rem; color:#9CA3AF; }
.wf2-side-item-actions { display:flex; gap:.15rem; }
.wf2-side-action-btn { background:none; border:none; cursor:pointer; color:#9CA3AF; padding:.15rem .25rem; border-radius:4px; font-size:.8rem; transition:.1s; }
.wf2-side-action-btn:hover { background:#F3F4F6; color:#374151; }
.wf2-side-pagination { padding:.5rem .6rem; border-top:1px solid var(--color-border,#E8E5DF); display:flex; gap:.2rem; align-items:center; justify-content:center; flex-shrink:0; }
.wf2-page-btn { background:none; border:1px solid #E2E8F0; border-radius:5px; width:26px; height:26px; font-size:.75rem; cursor:pointer; transition:.12s; color:#374151; display:flex; align-items:center; justify-content:center; }
.wf2-page-btn:hover { border-color:#1D4ED8; color:#1D4ED8; }
.wf2-page-btn.active { background:#1D4ED8; color:#fff; border-color:#1D4ED8; }

/* ── Old wf-layout stub (kept for any stray refs) ── */
.wf-layout {
  display: grid;
  grid-template-columns: 260px 1fr 300px;
  height: calc(100vh - 160px);
  overflow: hidden;
  gap: 0;
  border: 1px solid var(--color-border,#E8E5DF);
  border-radius: 12px;
  background: var(--bg-card,#fff);
  margin: 0 1.5rem 1.5rem;
}

/* Sidebar */
.wf-sidebar {
  border-right: 1px solid var(--color-border,#E8E5DF);
  display: flex; flex-direction: column; overflow: hidden;
}
.wf-sidebar-head {
  padding: 1rem;
  border-bottom: 1px solid var(--color-border,#E8E5DF);
  display: flex; flex-direction: column; gap: 0.6rem;
}
.wf-search-input, .wf-filter-select {
  width: 100%; padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border,#E8E5DF);
  border-radius: 7px; font-size: 0.8rem;
  background: var(--bg-primary,#FAF8F5);
  color: var(--color-text-main,#1A1A1A);
  outline: none; box-sizing: border-box;
}
.wf-search-input:focus, .wf-filter-select:focus {
  border-color: var(--color-accent,#A88B58);
}
.wf-list { flex: 1; overflow-y: auto; padding: 0.5rem; }

.wf-list-item {
  padding: 0.75rem 0.9rem; border-radius: 8px;
  cursor: pointer; transition: background .15s;
  border-left: 3px solid transparent;
  margin-bottom: 4px;
}
.wf-list-item:hover { background: var(--bg-primary,#FAF8F5); }
.wf-list-item.active {
  background: rgba(168,139,88,0.07);
  border-left-color: var(--color-accent,#A88B58);
}
.wf-list-item-name {
  font-size: 0.83rem; font-weight: 600;
  color: var(--color-text-main,#1A1A1A);
  margin-bottom: 3px; line-height: 1.3;
}
.wf-list-item-meta {
  font-size: 0.72rem; color: var(--color-text-muted,#6B6A67);
  display: flex; gap: 0.5rem; align-items: center;
}
.wf-cat-tag {
  font-size: 0.68rem; font-weight: 600; padding: 1px 6px;
  border-radius: 10px; background: rgba(168,139,88,0.1);
  color: var(--color-accent,#A88B58);
}
.wf-status-dot {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block;
}
.wf-status-dot.active { background: #10B981; }
.wf-status-dot.draft  { background: #F59E0B; }
.wf-status-dot.archived { background: #9CA3AF; }

/* Center flow area */
.wf-center {
  display: flex; flex-direction: column; overflow: hidden;
  border-right: 1px solid var(--color-border,#E8E5DF);
}
.wf-center-head {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border,#E8E5DF);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.wf-title { font-size: 1rem; font-weight: 700; color: var(--color-text-main,#1A1A1A); margin: 0 0 2px; }
.wf-desc  { font-size: 0.78rem; color: var(--color-text-muted,#6B6A67); margin: 0; }
.wf-status-badge {
  font-size: 0.72rem; font-weight: 700; padding: 3px 10px;
  border-radius: 20px;
}
.wf-status-badge.active   { background: rgba(16,185,129,.1); color: #10B981; }
.wf-status-badge.draft    { background: rgba(245,158,11,.1);  color: #F59E0B; }
.wf-status-badge.archived { background: rgba(156,163,175,.1); color: #6B7280; }

.wf-flow-wrap {
  flex: 1; overflow-y: auto; padding: 1.5rem;
  display: flex; flex-direction: column; align-items: center;
}
.wf-empty-state {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.75rem; padding: 4rem 2rem; color: var(--color-text-muted,#6B6A67);
  font-size: 0.85rem; text-align: center;
}

/* Flow diagram */
.wf-flow { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; max-width: 460px; }

.wf-node-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; }

.wf-connector {
  width: 2px; height: 28px;
  background: linear-gradient(to bottom, var(--color-border,#E8E5DF), var(--color-border,#E8E5DF));
  position: relative;
}
.wf-connector::after {
  content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--color-border,#ccc);
}

.wf-start-node, .wf-end-node {
  padding: 0.4rem 1.5rem; border-radius: 20px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: .05em;
}
.wf-start-node { background: #D1FAE5; color: #065F46; }
.wf-end-node   { background: #FEE2E2; color: #991B1B; }

.wf-step-node {
  width: 100%; border: 1.5px solid var(--color-border,#E8E5DF);
  border-radius: 10px; padding: 0.75rem 1rem;
  background: var(--bg-card,#fff); cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  position: relative;
}
.wf-step-node:hover { border-color: var(--color-accent,#A88B58); box-shadow: 0 2px 8px rgba(168,139,88,.12); }
.wf-step-node.selected { border-color: var(--color-accent,#A88B58); box-shadow: 0 0 0 3px rgba(168,139,88,.15); }
.wf-step-node.done { border-color: #10B981; background: rgba(16,185,129,.04); }
.wf-step-node.active-step { border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.wf-step-node.blocked { border-color: #EF4444; background: rgba(239,68,68,.03); }

.wf-step-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; }
.wf-step-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-accent,#A88B58); color: #fff;
  font-size: 0.68rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.wf-step-node.done .wf-step-num { background: #10B981; }
.wf-step-node.active-step .wf-step-num { background: #3B82F6; }
.wf-step-node.blocked .wf-step-num { background: #EF4444; }

.wf-step-name { font-size: 0.85rem; font-weight: 600; color: var(--color-text-main,#1A1A1A); flex: 1; }
.wf-step-type-icon { font-size: 0.9rem; }
.wf-step-done-check {
  width: 18px; height: 18px; border-radius: 50%;
  background: #10B981; color: #fff; font-size: 0.7rem;
  display: flex; align-items: center; justify-content: center;
}

.wf-step-body { font-size: 0.75rem; color: var(--color-text-muted,#6B6A67); padding-left: 1.9rem; }
.wf-step-assignee { margin-bottom: 2px; }
.wf-step-desc-preview {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; margin-bottom: 4px;
}
.wf-step-progress { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.wf-step-check-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-border,#E8E5DF); border: 1px solid #ccc;
}
.wf-step-check-dot.done { background: #10B981; border-color: #10B981; }
.wf-step-deadline { font-size: 0.7rem; color: #F59E0B; font-weight: 600; margin-top: 3px; }

/* Add step bar */
.wf-add-step-bar {
  border-top: 1px solid var(--color-border,#E8E5DF);
  padding: 0.75rem 1.25rem;
  display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
  background: var(--bg-primary,#FAF8F5);
}
.wf-step-type-btn {
  border: 1px solid var(--color-border,#E8E5DF); border-radius: 6px;
  padding: 0.3rem 0.65rem; font-size: 0.75rem; background: var(--bg-card,#fff);
  cursor: pointer; transition: .15s; color: var(--color-text-main,#1A1A1A);
}
.wf-step-type-btn:hover { border-color: var(--color-accent,#A88B58); background: rgba(168,139,88,.06); }

/* Right detail panel */
.wf-detail {
  display: flex; flex-direction: column; overflow: hidden;
}
.wf-detail-head {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-border,#E8E5DF);
  display: flex; align-items: center; justify-content: space-between;
}
.wf-detail-title { font-size: 0.82rem; font-weight: 700; color: var(--color-text-main,#1A1A1A); }
.wf-detail-body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.9rem; }
.wf-detail-foot {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--color-border,#E8E5DF);
  display: flex; justify-content: space-between; align-items: center;
}

.wf-field-group { display: flex; flex-direction: column; gap: 0.35rem; }
.wf-label { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted,#6B6A67); text-transform: uppercase; letter-spacing: .04em; }
.wf-input {
  border: 1px solid var(--color-border,#E8E5DF); border-radius: 7px;
  padding: 0.5rem 0.75rem; font-size: 0.82rem;
  background: var(--bg-primary,#FAF8F5); color: var(--color-text-main,#1A1A1A);
  width: 100%; box-sizing: border-box; outline: none;
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
}
.wf-input:focus { border-color: var(--color-accent,#A88B58); }
.wf-textarea { resize: vertical; min-height: 80px; }

.wf-checklist { display: flex; flex-direction: column; gap: 0.4rem; }
.wf-check-item {
  display: flex; align-items: center; gap: 0.5rem;
}
.wf-check-item input[type="checkbox"] { accent-color: var(--color-accent,#A88B58); cursor: pointer; }
.wf-check-item .wf-check-text {
  flex: 1; font-size: 0.8rem; color: var(--color-text-main,#1A1A1A);
  border: none; outline: none; background: transparent;
  border-bottom: 1px solid var(--color-border,#E8E5DF);
  padding: 2px 4px;
}
.wf-check-item .wf-check-text:focus { border-bottom-color: var(--color-accent,#A88B58); }
.wf-check-item .wf-check-del {
  background: none; border: none; color: #EF4444; cursor: pointer; font-size: 0.85rem; padding: 0;
}
.wf-add-check-btn {
  background: none; border: 1px dashed var(--color-border,#E8E5DF); border-radius: 6px;
  padding: 0.35rem 0.75rem; font-size: 0.75rem; cursor: pointer;
  color: var(--color-text-muted,#6B6A67); transition: .15s; margin-top: 4px;
}
.wf-add-check-btn:hover { border-color: var(--color-accent,#A88B58); color: var(--color-accent,#A88B58); }

.wf-btn-icon {
  background: none; border: 1px solid var(--color-border,#E8E5DF); border-radius: 6px;
  padding: 0.35rem 0.5rem; cursor: pointer; display: flex; align-items: center;
  transition: .15s; color: var(--color-text-muted,#6B6A67);
}
.wf-btn-icon:hover { border-color: var(--color-accent,#A88B58); color: var(--color-accent,#A88B58); }
.wf-btn-danger:hover { border-color: #EF4444 !important; color: #EF4444 !important; }
.wf-btn-danger-outline {
  background: none; border: 1px solid #EF4444; border-radius: 7px;
  padding: .45rem 0.9rem; font-size: .8rem; cursor: pointer; color: #EF4444;
}
.wf-btn-danger-outline:hover { background: rgba(239,68,68,.06); }
/* wf2 helper classes */
.wf2-cat-tag{background:rgba(168,139,88,.1);color:#A88B58;border-radius:10px;padding:1px 8px;font-size:.68rem;font-weight:700;}
.wf2-card-desc{font-size:.76rem;color:#6B7280;margin-top:.4rem;line-height:1.4;}
.wf2-node-num-sm{font-size:.6rem;font-weight:700;color:#6B7280;position:absolute;top:-18px;left:50%;transform:translateX(-50%);white-space:nowrap;}

/* ═══════════════════════════════════════════
   ADMIN STUDENT DETAIL OVERLAY  (adsd-*)
═══════════════════════════════════════════ */
.adsd-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-primary, #F1F3F5);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: adsdFadeIn .22s ease;
}
@keyframes adsdFadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* Topbar */
.adsd-topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .7rem 1.5rem;
  border-bottom: 1px solid var(--border-light, rgba(0,0,0,.07));
  background: var(--bg-card, #fff);
  flex-shrink: 0;
}
.adsd-back-btn {
  display: flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 600; color: var(--text-muted);
  cursor: pointer; background: none; border: none;
  padding: .35rem .75rem; border-radius: 8px;
  transition: background .15s, color .15s; white-space: nowrap;
}
.adsd-back-btn:hover { background: var(--bg-primary,#FAF8F5); color: var(--text-main); }
.adsd-back-btn svg { width:15px; height:15px; }
.adsd-topbar-title { display:flex; flex-direction:column; flex:1; min-width:0; }
.adsd-topbar-name { font-size:.92rem; font-weight:700; color:var(--text-main); }
.adsd-topbar-code { font-size:.68rem; color:var(--accent,#A88B58); font-weight:700; font-family:monospace; }
.adsd-topbar-actions { display:flex; gap:.5rem; }
.adsd-btn-edit {
  font-size:.78rem; font-weight:600; padding:.42rem 1.1rem;
  background: var(--accent,#A88B58); color:#fff; border:none; border-radius:8px; cursor:pointer;
  transition: opacity .15s;
}
.adsd-btn-edit:hover { opacity:.85; }

/* Layout: sidebar + main */
.adsd-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  padding: .65rem .75rem .75rem;
  gap: .75rem;
  align-items: stretch;
  min-height: 0;
}

/* Sidebar */
.adsd-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--bg-card,#fff);
  border: 1px solid var(--border-light,rgba(0,0,0,.08));
  border-radius: 14px;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.adsd-sb-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem 1rem;
  gap: .35rem;
  border-bottom: 1px solid var(--border-light,rgba(0,0,0,.06));
}
.adsd-avatar {
  width: 60px; height: 60px; border-radius: 50%;
  background: #F97316; color:#fff;
  display: flex; align-items:center; justify-content:center;
  font-weight: 700; font-size: 1.25rem; flex-shrink:0;
  margin-bottom: .4rem;
}
.adsd-name { font-size:.95rem; font-weight:700; color:var(--text-main); margin:0; text-align:center; }
.adsd-code { font-size:.66rem; font-family:monospace; color:var(--accent,#A88B58); font-weight:700; display:block; text-align:center; }
.adsd-sb-section {
  border-bottom: 1px solid var(--border-light,rgba(0,0,0,.06));
}
.adsd-sb-section-label {
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
  color: var(--text-muted); padding: .6rem 1rem .4rem;
  background: var(--bg-primary,#F7F4EF);
}
.adsd-sb-rows { padding: .25rem 0; }
.adsd-sb-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .28rem 1rem; gap: .5rem; font-size: .72rem;
}
.adsd-sb-row span:first-child { color: var(--text-muted); flex-shrink:0; }
.adsd-sb-row span:last-child { color: var(--text-main); font-weight:500; text-align:right; }
.adsd-sb-accent { color: var(--accent,#A88B58) !important; font-weight:700 !important; }
.adsd-sb-notes-section .adsd-notes {
  padding: .7rem 1rem; font-size:.76rem; line-height:1.6; color:var(--text-main); margin:0;
}

/* Main content */
.adsd-main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* Prevent flex children from shrinking — they must keep natural height so the parent scrolls */
.adsd-main > * { flex-shrink: 0; }

/* Section heading */
.adsd-section-hd {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
  color: var(--text-muted); margin-bottom: .7rem;
  display: flex; align-items: center; gap: .5rem;
}
.adsd-section-hd::after {
  content: ''; flex: 1; height: 1px; background: var(--border-light,rgba(0,0,0,.07));
}

/* ── Horizontal roadmap (student detail modal) ── */
.adsd-roadmap-scroll { overflow-x: auto; }
.adsd-roadmap-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .45rem;
}

/* Scope card styles to the horizontal track only, so the vertical CRM roadmap is unaffected */
.adsd-roadmap-track .stp-roadmap-step {
  background: var(--bg-card,#fff);
  border: 1px solid var(--border-light,rgba(0,0,0,.08));
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.adsd-roadmap-track .stp-roadmap-step.done-card   { border-left: 3px solid #3B82F6; }
.adsd-roadmap-track .stp-roadmap-step.active-card { border-left: 3px solid #F59E0B; }

.adsd-roadmap-track .stp-step-dot {
  padding: .45rem .75rem .4rem;
  background: #F3F4F6;
  display: flex; align-items: center; justify-content: space-between; gap: .3rem;
  font-size: .65rem; font-weight: 700; color: #6B7280; letter-spacing: .03em;
  /* override width/height/border-radius from CRM vertical roadmap */
  width: auto; height: auto; border-radius: 0; border: none; flex-shrink: unset;
}
.adsd-roadmap-track .stp-step-dot.done   { background: linear-gradient(120deg,#2563EB,#3B82F6); color:#fff; }
.adsd-roadmap-track .stp-step-dot.active { background: linear-gradient(120deg,#D97706,#F59E0B); color:#fff; }
.adsd-roadmap-track .stp-step-dot::before { content: attr(data-month); }
.adsd-roadmap-track .stp-step-dot svg { width:13px; height:13px; fill:currentColor; flex-shrink:0; }

/* Pulsing dot for the active month */
.stp-active-dot {
  display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: rgba(255,255,255,.9); flex-shrink: 0;
  animation: stp-pulse .85s ease-in-out infinite alternate;
}
@keyframes stp-pulse {
  from { transform: scale(.8); opacity: .65; }
  to   { transform: scale(1.25); opacity: 1; }
}

.adsd-roadmap-track .stp-step-body {
  padding: .55rem .75rem .7rem; flex: 1;
  display: flex; flex-direction: column; gap: .35rem;
}
.adsd-roadmap-track .stp-step-label {
  font-size: .72rem; font-weight: 600; color: var(--text-main,#1A1A1A); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.adsd-roadmap-track .stp-step-tag {
  display: inline-block; margin-top: auto; padding: .18rem .5rem;
  border-radius: 4px; font-size: .58rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  background: #F3F4F6; color: #6B7280;
}
.adsd-roadmap-track .stp-step-tag.done     { background: #D1FAE5; color: #059669; }
.adsd-roadmap-track .stp-step-tag.active   { background: #FEF3C7; color: #D97706; }
.adsd-roadmap-track .stp-step-tag.upcoming { background: #F3F4F6; color: #9CA3AF; }

/* Shared card */
.adsd-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-light, rgba(0,0,0,.07));
  border-radius: 12px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.adsd-card-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom:.75rem;
}
.adsd-card-head h4 {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px; color: var(--text-muted); margin: 0;
}
.adsd-add-btn {
  width:22px; height:22px; border:1px solid var(--border-light); border-radius:5px;
  background:none; cursor:pointer; font-size:.9rem; color:var(--text-muted);
  display:flex; align-items:center; justify-content:center; line-height:1;
}

/* Middle row: 3 panels */
.adsd-mid-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 0.9fr;
  gap: 1rem;
  align-items: stretch;
  height: 360px;
}

/* Semester card */
.adsd-sem-badge {
  font-size:.72rem; font-weight:600; color:var(--accent,#A88B58);
  padding:.25rem .6rem; background:rgba(168,139,88,.1); border-radius:6px;
  margin-bottom:.75rem; display:inline-block;
}
.adsd-sem-rows { display:flex; flex-direction:column; gap:.6rem; flex:1; justify-content:center; }
.adsd-sem-row-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:.2rem; }
.adsd-sem-label { font-size:.72rem; color:var(--text-muted); font-weight:500; }
.adsd-sem-bar-track {
  height: 5px; border-radius: 3px; background:var(--border-light,#E8E5DF); overflow:hidden;
}
.adsd-sem-bar-fill {
  height:100%; border-radius:3px; background:var(--accent,#A88B58);
  transition:width .4s ease; width:0%;
}

/* Score card */
.adsd-scorecard-list {
  flex: 1; overflow-y:auto; display:flex; flex-direction:column; gap:.6rem;
  padding-right:2px; margin-top:.25rem;
}
.adsd-card .scorecard-period-btn {
  font-size:.62rem; font-weight:700; padding:.22rem .6rem;
  border-radius:6px; border:1px solid var(--border-light);
  cursor:pointer; background:transparent; color:var(--text-muted);
  transition:background .15s,color .15s;
}
.adsd-card .scorecard-period-btn.active { background:var(--accent,#A88B58); color:#fff; border-color:transparent; }

/* Right stack: Tuition + Flight */
.adsd-right-stack { display:flex; flex-direction:column; gap:1rem; height:100%; min-height:0; }
.adsd-right-stack .adsd-flight-card2 { flex:1; min-height:0; }
.adsd-tuition-rows { display:flex; flex-direction:column; gap:.15rem; margin-top:.5rem; }
.adsd-tuition-row { display:flex; justify-content:space-between; font-size:.75rem; padding:.18rem 0; }
.adsd-tuition-row span:first-child { color:var(--text-muted); }
.adsd-tuition-row span:last-child { font-weight:600; }
.adsd-paid span:last-child { color:#10B981; }
.adsd-remain span:last-child { color:#EF4444; }
.adsd-flight-body2 {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  flex:1; gap:.3rem; text-align:center;
}
.adsd-flight-icon2 { font-size:1.6rem; opacity:.5; }

/* Bottom detail tabs */
.adsd-detail-card2 {
  background: var(--bg-card,#fff);
  border: 1px solid var(--border-light,rgba(0,0,0,.07));
  border-radius: 12px;
  overflow: hidden;
}
.adsd-detail-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-light,rgba(0,0,0,.07));
  padding: 0 1.1rem;
  background: var(--bg-primary,#FAF8F5);
}
.adsd-dtab {
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  padding:.7rem 1rem; border:none; background:none; cursor:pointer;
  color:var(--text-muted); border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s; white-space:nowrap;
}
.adsd-dtab.active { color:var(--text-main); border-bottom-color:var(--accent,#A88B58); }
.adsd-dpanel { display:none; padding:1.1rem; }
.adsd-dpanel.active { display:block; }
.adsd-detail-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.adsd-detail-col-hd {
  font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.7px;
  color:var(--text-muted); margin-bottom:.7rem; padding-bottom:.4rem;
  border-bottom:1px solid var(--border-light,rgba(0,0,0,.07));
}

/* Detail rows (shared from before) */
.adsd-dg-row {
  display: grid; grid-template-columns: auto 1fr;
  gap: .35rem 1rem; padding: .3rem 0;
  border-bottom: 1px solid var(--border-light,rgba(0,0,0,.04));
  font-size: .76rem; align-items:baseline;
}
.adsd-dg-row:last-child { border-bottom:none; }
.adsd-dg-row span:first-child { color:var(--text-muted); white-space:nowrap; font-size:.72rem; }
.adsd-dg-row span:last-child { color:var(--text-main); font-weight:500; text-align:right; }
.adsd-dg-multiline span:last-child { white-space:pre-wrap; text-align:left; }

.adsd-notes { font-size:.76rem; color:var(--text-main); white-space:pre-wrap; line-height:1.6; margin:0; }

@media (max-width:900px) {
  .adsd-sidebar { width:180px; }
  .adsd-mid-row { grid-template-columns:1fr 1fr; }
  .adsd-right-stack { grid-column:1/-1; flex-direction:row; }
}
@media (max-width:640px) {
  .adsd-sidebar { display:none; }
  .adsd-mid-row { grid-template-columns:1fr; }
  .adsd-detail-3col { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════
   STUDENT WIDE TABLE  (student-wide-table)
═══════════════════════════════════════ */
.student-wide-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 680px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.15) transparent;
}
.student-wide-table-wrap::-webkit-scrollbar { width: 6px; height: 6px; }
.student-wide-table-wrap::-webkit-scrollbar-track { background: transparent; }
.student-wide-table-wrap::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 3px; }
.student-wide-table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.28); }

.student-wide-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.74rem;
}
.student-wide-table thead tr {
  background: var(--bg-primary, #FAF8F5);
}
.student-wide-table th {
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  padding: 9px 14px;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-light, rgba(0,0,0,.07));
  position: sticky;
  top: 0;
  background: var(--bg-primary, #FAF8F5);
  z-index: 1;
}
.student-wide-table td {
  padding: 9px 14px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-light, rgba(0,0,0,.06));
  font-size: 0.74rem;
  color: var(--text-main);
  white-space: nowrap;
}
.student-wide-table tr:hover td { background: rgba(99,102,241,.03); }

/* Column widths — sized to content, not crammed */
.stwh-code    { min-width: 110px; text-align: center; }
.stwh-name    { min-width: 160px; }
.stwh-email   { min-width: 190px; }
.stwh-phone   { min-width: 120px; }
.stwh-home    { min-width: 100px; }
.stwh-country { min-width: 110px; }
.stwh-status  { min-width: 150px; text-align: center; }
.stwh-roadmap { min-width: 100px; text-align: center; }
.stwh-enroll  { min-width: 120px; text-align: center; }
.stwh-room    { min-width: 110px; text-align: center; }
.stwh-src     { min-width: 130px; }
.stwh-flight  { min-width: 120px; text-align: center; }
.stwh-paid    { min-width: 130px; text-align: right; }
.stwh-total   { min-width: 130px; text-align: right; }
.stwh-action  { min-width: 100px; text-align: center; }

/* Money input cells */
.stw-paid, .stw-total { text-align:right; }
.stw-money-input {
  width: 112px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font-size: .73rem;
  font-weight: 600;
  color: var(--text-main);
  text-align: right;
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
  font-family: inherit;
  cursor: text;
}
.stw-money-input:hover {
  border-color: var(--color-border, #E8E5DF);
  background: var(--bg-secondary, #F7F4EF);
}
.stw-money-input:focus {
  border-color: #6366F1;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}
.stw-paid-input  { color: #16A34A; }
.stw-total-input { color: var(--text-main); }

/* Cell styles */
.stw-ts   { color: var(--text-muted); font-size:.68rem; }
.stw-code-val { font-weight:700; color:#6366F1; font-family:monospace; font-size:.75rem; }
.stw-name-main { font-weight:600; font-size:.76rem; color:var(--text-main); }
.stw-link { color: var(--accent,#A88B58); text-decoration:none; font-size:.7rem; }
.stw-link:hover { text-decoration:underline; }
.stw-country-val { font-weight:600; font-size:.72rem; }
.stw-roadmap-tag {
  display: inline-block;
  font-size: .65rem; font-weight: 700;
  padding: 2px 8px; border-radius: 10px;
  background: rgba(99,102,241,.1); color: #6366F1;
}
.stw-actions {
  display: flex;
  gap: 3px;
  justify-content: center;
  align-items: center;
}
.stw-actions .action-icon-btn {
  padding: 4px 5px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s;
}
.stw-actions .action-icon-btn:hover { opacity: .75; }
.stw-flight input[type="date"] {
  font-size: .68rem;
  padding: 2px 4px;
  border-radius: 6px;
  border: 1px solid var(--border-light, rgba(0,0,0,.1));
  background: var(--bg-primary,#FAF8F5);
  color: var(--text-main);
  max-width: 110px;
}

/* Student table inline status select */
.stw-status-select {
  font-size: .68rem;
  font-weight: 700;
  border: none;
  border-radius: 20px;
  padding: 3px 10px 3px 8px;
  cursor: pointer;
  appearance: auto;
  -webkit-appearance: auto;
  outline: none;
  max-width: 130px;
}
.stw-status-select.badge-danghoc   { background:rgba(16,185,129,.1);  color:#10B981; }
.stw-status-select.badge-waiting   { background:rgba(245,158,11,.1);  color:#F59E0B; }
.stw-status-select.badge-selected  { background:rgba(99,102,241,.1);  color:#6366F1; }
.stw-status-select.badge-processing{ background:rgba(168,139,88,.1);  color:#A88B58; }

/* Student table inline select (room + source) */
.stw-inline-select {
  font-size: .70rem;
  font-weight: 500;
  border: 1px solid var(--border-light, rgba(0,0,0,.09));
  border-radius: 7px;
  padding: 3px 6px;
  background: var(--bg-primary, #FAF8F5);
  color: var(--text-main);
  cursor: pointer;
  max-width: 140px;
  width: 100%;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.stw-inline-select:hover  { border-color: var(--accent, #A88B58); }
.stw-inline-select:focus  { border-color: var(--accent, #A88B58); box-shadow: 0 0 0 2px rgba(168,139,88,.15); }
.stw-src-select  { max-width: 150px; }
.stw-room-select { max-width: 120px; }

/* Student add/edit modal — 2-col row helper */
.sf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.sf-field { margin-bottom: 0; }

/* ── Chi tiết hồ sơ (student detail profile) ─────────────── */
.stp-detail-card { padding:1.25rem 1.5rem; }
.sdp-section-title {
  font-size:.68rem; font-weight:800; letter-spacing:1.1px;
  text-transform:uppercase; color:var(--color-accent,#A88B58);
  border-bottom:1px solid var(--color-border,#E8E5DF);
  padding-bottom:.45rem; margin-bottom:.85rem;
}
.sdp-row { display:grid; gap:.75rem; margin-bottom:.75rem; }
.sdp-1col { grid-template-columns:1fr; }
.sdp-2col { grid-template-columns:1fr 1fr; }
.sdp-3col { grid-template-columns:1fr 1fr 1fr; }
.sdp-field { display:flex; flex-direction:column; gap:.3rem; }
.sdp-field label { font-size:.7rem; font-weight:600; color:var(--color-text-muted,#6B6A67); }
.sdp-field input, .sdp-field select, .sdp-field textarea {
  font-size:.78rem; padding:.45rem .7rem;
  border:1px solid var(--color-border,#E8E5DF); border-radius:6px;
  background:var(--color-bg,#FAF8F5); color:var(--color-text-main,#1A1A1A);
  outline:none; transition:border-color .15s;
  font-family:inherit;
}
.sdp-field input:focus, .sdp-field select:focus, .sdp-field textarea:focus {
  border-color:var(--color-accent,#A88B58);
}
.sdp-field textarea { resize:vertical; min-height:70px; }

/* Education table */
.sdp-edu-header, .sdp-edu-row {
  display:grid; grid-template-columns:120px 1fr 90px 90px; gap:.5rem;
  align-items:center; padding:.4rem 0;
}
.sdp-edu-header {
  font-size:.67rem; font-weight:700; color:var(--color-text-muted,#6B6A67);
  border-bottom:1px solid var(--color-border,#E8E5DF); margin-bottom:.25rem;
}
.sdp-edu-row { border-bottom:1px solid rgba(0,0,0,.04); }
.sdp-edu-row:last-child { border-bottom:none; }
.sdp-edu-label { font-size:.74rem; font-weight:600; color:var(--color-text-main,#1A1A1A); }
.sdp-edu-row input {
  font-size:.76rem; padding:.38rem .55rem;
  border:1px solid var(--color-border,#E8E5DF); border-radius:5px;
  background:var(--color-bg,#FAF8F5); color:var(--color-text-main,#1A1A1A);
  outline:none; font-family:inherit; width:100%;
}
.sdp-edu-row input:focus { border-color:var(--color-accent,#A88B58); }

/* Family table */
.sdp-fam-header, .sdp-fam-row {
  display:grid; grid-template-columns:120px 1fr 80px 1fr; gap:.5rem;
  align-items:center; padding:.4rem 0;
}
.sdp-fam-header {
  font-size:.67rem; font-weight:700; color:var(--color-text-muted,#6B6A67);
  border-bottom:1px solid var(--color-border,#E8E5DF); margin-bottom:.25rem;
}
.sdp-fam-row { border-bottom:1px solid rgba(0,0,0,.04); }
.sdp-fam-row:last-child { border-bottom:none; }
.sdp-fam-label { font-size:.74rem; font-weight:600; color:var(--color-text-main,#1A1A1A); }
.sdp-fam-row input {
  font-size:.76rem; padding:.38rem .55rem;
  border:1px solid var(--color-border,#E8E5DF); border-radius:5px;
  background:var(--color-bg,#FAF8F5); color:var(--color-text-main,#1A1A1A);
  outline:none; font-family:inherit; width:100%;
}
.sdp-fam-row input:focus { border-color:var(--color-accent,#A88B58); }

/* Admin detail profile section */
/* Chi tiết hồ sơ cá nhân — spans all 3 grid columns inside adsd-body */
.adsd-detail-card {
  grid-column: 1 / -1;
}
.adsd-detail-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
  padding-top:.75rem;
}
.adsd-dg-section {
  font-size:.65rem; font-weight:800; letter-spacing:1px;
  text-transform:uppercase; color:var(--color-accent,#A88B58);
  border-bottom:1px solid var(--color-border,#E8E5DF);
  padding-bottom:.35rem; margin-bottom:.6rem;
}
.adsd-dg-row {
  display:grid; grid-template-columns:.9fr 1.2fr; gap:.5rem;
  font-size:.75rem; padding:.3rem 0;
  border-bottom:1px solid rgba(0,0,0,.04);
}
.adsd-dg-row:last-child { border-bottom:none; }
.adsd-dg-row > span:first-child { color:var(--color-text-muted,#6B6A67); font-weight:500; }
.adsd-dg-row > span:last-child  { color:var(--color-text-main,#1A1A1A); font-weight:400; }
.adsd-dg-multiline { grid-template-columns:1fr; }
.adsd-dg-multiline > span:last-child { white-space:pre-wrap; font-size:.73rem; color:#374151; }

@media (max-width:900px) {
  .sdp-2col { grid-template-columns:1fr; }
  .sdp-3col { grid-template-columns:1fr 1fr; }
  .sdp-edu-header, .sdp-edu-row { grid-template-columns:100px 1fr 70px 70px; }
  .sdp-fam-header, .sdp-fam-row { grid-template-columns:100px 1fr 65px 1fr; }
  .adsd-detail-grid { grid-template-columns:1fr 1fr; }
}

/* ================================================================
   MOBILE — Comprehensive pass  768 · 640 · 480
   ================================================================ */

/* ── 768 px ──────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ▸ Student detail overlay — tighter chrome */
  .adsd-topbar      { padding: .55rem .9rem; gap: .6rem; }
  .adsd-topbar-name { font-size: .86rem; }
  .adsd-topbar-code { font-size: .65rem; }
  .adsd-btn-edit    { padding: .38rem .8rem; font-size: .73rem; }
  .adsd-layout      { padding: .4rem .5rem .5rem; gap: .5rem; }

  /* mid-row: drop fixed height so cards breathe when stacked */
  .adsd-mid-row     { height: auto; gap: .6rem; }

  /* ▸ Student table height */
  .student-wide-table-wrap { max-height: calc(100svh - 190px); }

  /* ▸ Tab bars — horizontally scrollable */
  .adsd-detail-tabs,
  .hrm-profile-nav-tabs,
  .hrm-subtabs,
  .sp-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .adsd-detail-tabs::-webkit-scrollbar,
  .hrm-profile-nav-tabs::-webkit-scrollbar,
  .hrm-subtabs::-webkit-scrollbar,
  .sp-tabs::-webkit-scrollbar { display: none; }

  .sp-tab       { padding: .85rem .9rem; font-size: .78rem; }
  .hrm-subtabs  { padding: 0 .75rem; }

  /* ▸ HRM profile */
  .hrm-ptab-panel     { padding: .85rem 1rem; }
  .hrm-profile-tab-grid { grid-template-columns: 1fr; }

  /* ▸ Mini tables in cards — always horizontally scrollable */
  .mini-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ▸ Leave KPI row — wrap into 2-column grid on tablet */
  .leave-kpi-row  { flex-wrap: wrap; }
  .leave-kpi-card { flex: 0 0 calc(50% - 1px); }

  /* ▸ CRM filter bar — stack */
  .crm-filter-bar         { flex-direction: column; gap: .5rem; }
  .crm-filter-bar select,
  .crm-search-wrap        { width: 100%; }

  /* ▸ Dashboard topbar compact */
  .dashboard-topbar { height: 56px; padding: 0 1rem; }

  /* ▸ Modals — bottom sheet */
  .modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .modal-overlay > .login-card {
    width: 100%    !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0      !important;
    max-height: 94dvh;
    overflow-y: auto;
  }
}

/* ── 640 px ──────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* ▸ Mid-row: when 1-column the fixed 360 px crushes cards — reset */
  .adsd-mid-row { height: auto !important; }
  .adsd-card    { min-height: 140px; }

  /* ▸ Detail bottom panel */
  .adsd-dpanel { padding: .75rem; }
  .adsd-dtab   { font-size: .7rem; padding: .6rem .75rem; letter-spacing: .3px; }

  /* ▸ Detail grid: 3→2 col */
  .adsd-detail-grid { grid-template-columns: 1fr 1fr; }

  /* ▸ HRM profile topbar compact */
  .hrm-profile-topbar { padding: 0 .75rem; }
  .hrm-ptab           { padding: .85rem .8rem; font-size: .75rem; }

  /* ▸ HRM metric cards */
  .hrm-metric-card    { padding: 1rem; }
  .metric-card-header { padding-bottom: .55rem; margin-bottom: .6rem; }

  /* ▸ CRM bar chart labels */
  .crm-bar-label  { font-size: .64rem; }
  .crm-bar-amount { font-size: .64rem; }

  /* ▸ HRM/CRM tables compact */
  .hrm-staff-container { padding: .75rem; }
  .crm-table th,
  .crm-table td { font-size: .72rem; padding: .5rem .6rem; }
}

/* ── 480 px ──────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* ▸ Student detail overlay */
  .adsd-layout          { padding: .3rem; gap: .3rem; }
  .adsd-topbar          { padding: .45rem .6rem; }
  .adsd-topbar-name     { font-size: .8rem; }
  .adsd-topbar-actions  { gap: .3rem; }
  .adsd-btn-edit        { padding: .32rem .6rem; font-size: .7rem; }

  /* ▸ Detail panels */
  .adsd-dpanel          { padding: .6rem; }
  .adsd-detail-grid     { grid-template-columns: 1fr; }

  /* ▸ DG rows — label stacked above value */
  .adsd-dg-row {
    grid-template-columns: 1fr;
    gap: .08rem;
    padding: .42rem 0;
  }
  .adsd-dg-row > span:first-child {
    font-size: .63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .35px;
    color: var(--text-muted);
  }
  .adsd-dg-row > span:last-child { text-align: left; font-size: .78rem; }

  /* ▸ Education / family form rows */
  .sdp-edu-header, .sdp-edu-row {
    grid-template-columns: 72px 1fr 50px 50px;
    gap: .3rem;
    font-size: .7rem;
  }
  .sdp-fam-header, .sdp-fam-row {
    grid-template-columns: 72px 1fr 50px 1fr;
    gap: .3rem;
    font-size: .7rem;
  }

  /* ▸ HRM KPI */
  .hrm-kpi-card  { padding: .75rem .85rem; }
  .hrm-kpi-value { font-size: 1.2rem; }
  .hrm-kpi-label { font-size: .64rem; }

  /* ▸ HRM metric card */
  .hrm-metric-card       { padding: .85rem; }
  .metric-card-header h4 { font-size: .72rem; }

  /* ▸ Leave KPI — full column */
  .leave-kpi-row  { flex-direction: column; gap: 0; }
  .leave-kpi-card { width: 100%; }
  .leave-kpi-sep  { width: 100%; height: 1px; align-self: auto; }
  .leave-kpi-num  { font-size: 1.6rem; }

  /* ▸ CRM bar chart */
  .crm-bar-col    { min-width: 24px; }
  .crm-bar-label  { font-size: .58rem; }
  .crm-bar-amount { font-size: .58rem; }

  /* ▸ CRM/HRM tables */
  .crm-table th,
  .crm-table td        { font-size: .68rem; padding: .42rem .5rem; }

  /* ▸ HRM profile topbar */
  .hrm-ptab     { padding: .75rem .65rem; font-size: .72rem; }
  .hrm-back-btn { padding: .65rem .7rem; font-size: .72rem; }

  /* ▸ Modal: full screen on very small phones */
  .modal-overlay > .login-card {
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  /* ▸ Dashboard topbar */
  .dashboard-topbar { height: 50px; padding: 0 .75rem; }

  /* ▸ Upload buttons compact */
  .resume-doc-upload-btn { padding: .33rem .6rem; font-size: .7rem; }
}

/* Fix: Override reveal classes in student portal tabs to ensure content is fully visible */
.student-tab-content.reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ==========================================================================
   Học Viên Nguồn (Source Student) Table Styling
   ========================================================================== */
.src-table {
  border-collapse: collapse !important;
  width: 100%;
  border: 1px dashed #E5D5B8;
  margin-top: 1rem;
}

.src-table th {
  background-color: #DCE6F1 !important;
  color: #8C6D39 !important;
  font-weight: 700 !important;
  font-family: inherit;
  font-size: 0.78rem !important;
  text-transform: none !important;
  letter-spacing: 0.5px;
  border: 1px dashed #E5D5B8 !important;
  padding: 0.6rem 0.5rem !important;
  text-align: center !important;
  vertical-align: middle;
  white-space: nowrap;
}

.src-table td {
  background-color: #ffffff;
  color: #1A1A1A;
  border: 1px dashed #E5D5B8 !important;
  padding: 0.4rem 0.5rem !important;
  font-size: 0.78rem !important;
  text-align: center !important;
  vertical-align: middle;
}

/* Thicker solid separators for logical groups */
.src-table th:nth-child(6), .src-table td:nth-child(6),
.src-table th:nth-child(8), .src-table td:nth-child(8),
.src-table th:nth-child(10), .src-table td:nth-child(10),
.src-table th:nth-child(12), .src-table td:nth-child(12) {
  border-right: 2px solid #888888 !important;
}

/* Inline input boxes */
.src-inline-input {
  width: 100%;
  border: none;
  background: transparent;
  text-align: center;
  font-family: inherit;
  font-size: 0.78rem;
  padding: 0.2rem;
  outline: none;
  color: #1A1A1A;
  box-sizing: border-box;
}

.src-inline-input:focus {
  background: #FFFBEB;
  box-shadow: 0 0 2px rgba(168, 139, 88, 0.5);
  border-radius: 4px;
}

/* Inline select boxes */
.src-inline-select {
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  border: 1px solid #D1D5DB;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  text-align-last: center;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
  font-family: inherit;
  transition: all 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 10px;
  padding-right: 18px;
}

.src-inline-select:focus {
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

/* Date inputs styling in Source Students table */
.src-table input[type="date"] {
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  background-color: #FFFFFF;
  padding: 0.2rem 0.3rem;
  font-size: 0.78rem;
  color: #1A1A1A;
  font-family: inherit;
  box-sizing: border-box;
  text-align: center;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.src-table input[type="date"]:focus {
  border-color: #6366F1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}