@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root {
  --primary-blue: #1d72f2;
  --primary-blue-hover: #155bc0;
  --primary-blue-light: #e8f1fe;
  --primary-blue-soft: #f0f6ff;

  --bg-app: #f4f6fa;
  --bg-card: #ffffff;
  --bg-sidebar: #ffffff;

  --text-dark: #0f172a;
  --text-gray: #475569;
  --text-muted: #64748b;
  --text-dim: #94a3b8;

  --border-light: #e2e8f0;
  --border-subtle: #f1f5f9;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  --sidebar-w: 240px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

*::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
  width: 0;
  height: 0;
}

html,
body {
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text-dark);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  background: var(--bg-app);
  overscroll-behavior: none;
}

.material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  line-height: 1;
}

/* ==========================================================================
   1. LANDING LOGIN PAGE (login.php)
   ========================================================================== */
.login-split-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

.login-hero-half {
  flex: 1;
  background: linear-gradient(145deg, #2563eb 0%, #1d4ed8 45%, #1e40af 100%);
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(145deg, #2563eb 0%, #1d4ed8 45%, #1e40af 100%);
  background-size: 24px 24px, 100% 100%;
  color: #ffffff;
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.hero-top-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-logo-box {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 18px;
  backdrop-filter: blur(4px);
}

.hero-logo-text {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}

.hero-main-content {
  max-width: 520px;
  margin: 36px 0;
}

.hero-heading {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-bottom: 16px;
}

.hero-subtitle {
  font-size: 15px;
  line-height: 1.6;
  color: #dbeafe;
  margin-bottom: 32px;
}

.hero-features-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feature-glass-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s, transform 0.2s;
}

.feature-glass-card:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateX(4px);
}

.feature-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
}

.feature-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 2px;
}

.feature-desc {
  font-size: 11.5px;
  color: #bfdbfe;
  line-height: 1.35;
}

.hero-footer-copy {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.login-action-half {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: #ffffff;
}

.login-action-card {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.action-diamond-logo {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 26px;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
  margin-bottom: 24px;
}

.action-title {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.action-subtitle {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 28px;
}

.btn-primary-action {
  width: 100%;
  padding: 13px 20px;
  background: #1d72f2;
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, transform 0.1s;
}

.btn-primary-action:hover {
  background: #155bc0;
}

.signup-switch-text {
  margin-top: 24px;
  font-size: 13px;
  color: #64748b;
}

.signup-switch-text a {
  color: #1d72f2;
  font-weight: 600;
  text-decoration: none;
}

.terms-privacy-text {
  margin-top: 32px;
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.5;
}

.terms-privacy-text a {
  color: #1d72f2;
  text-decoration: none;
}

/* ==========================================================================
   2. TIME CHAMP ACCESS PORTAL (signin.php)
   ========================================================================== */
.signin-page-container {
  min-height: 100vh;
  display: flex;
  background: #ffffff;
}

.signin-form-col {
  width: 42%;
  min-width: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: #ffffff;
}

.signin-card {
  width: 100%;
  max-width: 360px;
}

.signin-title {
  font-size: 26px;
  font-weight: 700;
  color: #111827;
  text-align: center;
  margin-bottom: 32px;
}

.form-field {
  margin-bottom: 20px;
}

.form-field label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

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

.form-input-wrap input {
  width: 100%;
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  border: 1.5px solid #d1d5db;
  border-radius: var(--radius-md);
  color: #111827;
  outline: none;
  background: #ffffff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input-wrap input:focus {
  border-color: #1d72f2;
  box-shadow: 0 0 0 3px rgba(29, 114, 242, 0.15);
}

.toggle-password-btn {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}

.signin-options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  font-size: 13px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4b5563;
  cursor: pointer;
  user-select: none;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  accent-color: #1d72f2;
  cursor: pointer;
}

.forgot-link {
  color: #1d72f2;
  text-decoration: none;
  font-weight: 500;
}

.forgot-link:hover {
  text-decoration: underline;
}

.btn-signin {
  width: 100%;
  padding: 12px 20px;
  background: #1d72f2;
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}

.btn-signin:hover {
  background: #155bc0;
}

.signin-showcase-col {
  flex: 1;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  padding: 60px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.showcase-header {
  margin-bottom: 32px;
}

.timechamp-logo-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.tc-icon-hex {
  width: 38px;
  height: 38px;
  background: #1d72f2;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 22px;
  box-shadow: 0 4px 12px rgba(29, 114, 242, 0.3);
}

.tc-logo-text {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #0f172a;
}

.showcase-title {
  font-size: 26px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.showcase-subtitle {
  font-size: 14px;
  color: #64748b;
  max-width: 520px;
  line-height: 1.6;
}

.showcase-mockup-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 800px;
}

.mock-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  font-size: 12px;
}

.mock-card-title {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
}

.mock-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid #f1f5f9;
}

.mock-avatar-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.mock-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #3b82f6;
  color: #ffffff;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   3. APP SHELL & SIDEBAR NAVIGATION (Core Layout)
   ========================================================================== */
.app-layout {
  display: flex;
  min-height: 100vh;
  background: var(--bg-app);
}

.app-sidebar {
  width: var(--sidebar-w);
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100vh;
  max-height: 100vh;
  z-index: 100;
  overflow: visible !important;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-brand {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
  position: relative;
  height: 56px;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #111827;
  font-weight: 700;
  font-size: 18px;
  min-width: 0;
}

.sidebar-logo .logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-logo .brand-text {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Sidebar Collapse / Expand Toggle Button */
.sidebar-collapse-btn {
  position: absolute;
  right: -13px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  cursor: pointer;
  z-index: 120;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
  padding: 0;
}

.sidebar-collapse-btn svg {
  transition: transform 0.2s ease;
}

.sidebar.collapsed .sidebar-collapse-btn svg,
.app-sidebar.collapsed .sidebar-collapse-btn svg {
  transform: rotate(180deg);
}

.sidebar-collapse-btn:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #9ca3af;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.sidebar-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 14px 12px 20px 12px;
  display: flex;
  flex-direction: column;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.sidebar-content::-webkit-scrollbar {
  display: block !important;
  width: 5px !important;
}

.sidebar-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.sidebar-content::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 4px !important;
}

.sidebar-content::-webkit-scrollbar-thumb:hover {
  background: #94a3b8 !important;
}

/* Accordion Sidebar Section Headers */
.nav-accordion-section {
  margin-bottom: 4px;
}

.nav-group-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #475569;
  letter-spacing: 0.05em;
  padding: 9px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border-radius: var(--radius-md);
  user-select: none;
  transition: all 0.15s ease;
}

.nav-group-header:hover {
  background: #f8fafc;
  color: #0f172a;
}

.nav-chevron {
  font-size: 16px;
  color: #64748b;
  transition: transform 0.2s ease;
}

.nav-accordion-section.active .nav-chevron {
  transform: rotate(90deg);
  color: #0f172a;
}

.nav-sub-group {
  display: none;
  padding-left: 2px;
  margin-top: 2px;
}

.nav-accordion-section.active .nav-sub-group {
  display: block;
}

.nav-item-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  color: #4b5563;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 2px;
  position: relative;
  transition: all 0.15s;
}

.nav-fav-star-btn {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px;
  margin-left: auto;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: transform 0.15s, color 0.15s;
}

.nav-fav-star-btn .star-icon {
  font-size: 16px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.nav-item-link:hover .nav-fav-star-btn {
  display: flex;
}

.nav-fav-star-btn:hover {
  color: #0f172a;
  transform: scale(1.15);
}

.nav-item-link.is-favourite .nav-fav-star-btn {
  display: flex;
  color: #0f172a;
}

.nav-item-link.is-favourite .nav-fav-star-btn .star-icon {
  font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 20;
  color: #0f172a;
}

/* Sidebar 'Soon' Label Badge */
.nav-soon-badge {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 1.5px 5.5px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  margin-left: auto;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  user-select: none;
  pointer-events: none;
}

.nav-item-link:hover .nav-soon-badge {
  margin-left: 0;
  margin-right: 4px;
}

.app-sidebar.collapsed .nav-soon-badge {
  display: none !important;
}

.nav-item-link:hover {
  background: #f8fafc;
  color: #111827;
}

.nav-item-link.active {
  background: #f0f6ff;
  color: #1d72f2;
  font-weight: 600;
}

.nav-item-link.active .material-symbols-rounded:not(.star-icon) {
  color: #1d72f2;
}

.shortcut-badge {
  font-size: 11px;
  font-weight: 600;
  background: #ffffff;
  color: #64748b;
  border: 1px solid #e2e8f0;
  padding: 2px 7px;
  border-radius: 6px;
}

/* Fixed Bottom Container (Help + Profile) */
.sidebar-bottom-fixed {
  margin-top: auto;
  border-top: 1px solid #f1f5f9;
  background: #ffffff;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.03);
}

.sidebar-help-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  color: #334155;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.15s;
}

.sidebar-help-link:hover {
  background: #f8fafc;
  color: #0f172a;
}

.help-left-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.help-text {
  font-weight: 600;
  font-size: 14px;
  color: #0f172a;
}

.sidebar-profile {
  padding: 12px 16px;
  border-top: 1px solid #f8fafc;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile-chip {
  display: flex;
  align-items: center;
  gap: 10px;
}

.profile-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #4f46e5;
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-meta .name {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.profile-meta .role {
  font-size: 11px;
  color: #9ca3af;
}

/* Collapsed Sidebar State (Exact Replica of Screenshot) */
.app-sidebar.collapsed {
  width: 56px;
}

.app-sidebar.collapsed .brand-text,
.app-sidebar.collapsed .nav-text,
.app-sidebar.collapsed .nav-group-header,
.app-sidebar.collapsed .shortcut-badge,
.app-sidebar.collapsed .help-text,
.app-sidebar.collapsed .profile-meta,
.app-sidebar.collapsed .nav-fav-star-btn,
.app-sidebar.collapsed .sidebar-profile-logout {
  display: none !important;
}

.app-sidebar.collapsed .sidebar-brand {
  padding: 12px 6px;
  justify-content: center;
  position: relative;
  height: 56px;
}

.app-sidebar.collapsed .sidebar-logo {
  justify-content: center;
  margin: 0;
}

.app-sidebar.collapsed .sidebar-logo .logo-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-sidebar.collapsed .sidebar-content {
  padding: 8px 4px;
  align-items: center;
  overflow-y: auto;
  gap: 2px;
}

.app-sidebar.collapsed .nav-accordion-section {
  width: 100%;
  margin-bottom: 0;
}

.app-sidebar.collapsed .nav-sub-group {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
}

.app-sidebar.collapsed .nav-item-link {
  width: 38px;
  height: 38px;
  padding: 0;
  margin: 2px auto;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #334155;
  transition: all 0.15s ease;
}

.app-sidebar.collapsed .nav-item-link:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.app-sidebar.collapsed .nav-item-link.active {
  background: #e8f1fe;
  color: #1d72f2;
}

.app-sidebar.collapsed .nav-item-link.active .material-symbols-rounded {
  color: #1d72f2;
}

.app-sidebar.collapsed .nav-item-link .material-symbols-rounded {
  font-size: 20px;
}

.app-sidebar.collapsed .collapse-icon-expanded {
  display: none !important;
}

.app-sidebar.collapsed .collapse-icon-collapsed {
  display: block !important;
}

.app-sidebar.collapsed .sidebar-bottom-fixed {
  padding: 6px 0 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border-top: 1px solid #f1f5f9;
}

.app-sidebar.collapsed .sidebar-help-link {
  width: 38px;
  height: 38px;
  padding: 0;
  margin: 0 auto;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-sidebar.collapsed .sidebar-profile {
  padding: 6px 0 0 0;
  border-top: 1px solid #f1f5f9;
  width: 100%;
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.app-sidebar.collapsed .profile-chip {
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0 auto;
}

.app-sidebar.collapsed .profile-avatar {
  display: flex !important;
  width: 38px;
  height: 38px;
  font-size: 15px;
  font-weight: 800;
  background: #5046e5;
  color: #ffffff;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(80, 70, 229, 0.3);
  transition: transform 0.15s ease;
}

.app-sidebar.collapsed .profile-avatar:hover {
  transform: scale(1.06);
}

/* App Main Body Layout */
.app-body {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 56px;
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--bg-app);
  min-height: 100vh;
}

.app-body.collapsed {
  margin-left: 56px;
}

/* Topbar Header - Fixed and Non-Scrolling */
.app-header-top {
  height: 56px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  right: 0;
  z-index: 90;
  transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-sidebar.collapsed~.app-body .app-header-top,
.app-body.collapsed .app-header-top {
  left: 56px;
}

.top-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: 6px 12px;
  width: 320px;
}

.top-search-box input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  width: 100%;
  color: #111827;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.top-icon-btn {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.top-icon-btn:hover {
  background: #f1f5f9;
  color: #111827;
}

.badge-dot-num {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #ef4444;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   4. DASHBOARDS VIEW (dashboard.php - Matching Screenshot 2)
   ========================================================================== */
.dash-pulse-container {
  padding: 0 32px 32px 32px;
  flex: 1;
}

.dash-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 16px 0;
  margin-bottom: 16px;
  position: sticky;
  top: 56px;
  background: var(--bg-app);
  z-index: 80;
}

.dash-title-wrap h1 {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.dash-title-wrap p {
  font-size: 13.5px;
  color: #64748b;
  margin-top: 4px;
}

.user-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  vertical-align: middle;
}

.dash-action-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-dash-white {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-dash-white:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.dash-action-buttons a {
  text-decoration: none !important;
}

.btn-dash-blue {
  background: #1d72f2;
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.15s;
}

.btn-dash-blue:hover,
.btn-dash-blue:focus,
.btn-dash-blue:active {
  background: #155bc0;
  color: #ffffff;
  text-decoration: none !important;
}

/* 5-Column Metrics Grid */
.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
  width: 100%;
}

.dash-kpi-card {
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 128px;
  width: 100%;
  transition: transform 0.15s, box-shadow 0.15s;
}

.dash-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.dash-kpi-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.dash-kpi-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 18px;
  flex-shrink: 0;
}

.dash-kpi-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.04em;
}

.dash-kpi-value {
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 4px;
}

.dash-kpi-sub {
  font-size: 12px;
  color: #64748b;
}

/* Budgeted Hours Full Width Row */
.budget-kpi-row {
  width: 100%;
  margin-bottom: 20px;
}

.budget-kpi-card {
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  width: 100%;
  max-width: 100%;
}

/* Billable Projects Budget Box */
.billable-budget-box {
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  width: 100%;
}

.billable-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billable-title-wrap h3 {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.billable-title-wrap p {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

.billable-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 4 Summary Cards Grid */
.budget-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 20px;
  margin-bottom: 16px;
}

.budget-stat-card {
  background: #f8fafc;
  border: 1px solid #eef2f6;
  border-radius: 10px;
  padding: 16px 20px;
}

.budget-stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 6px;
}

.budget-stat-value {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

/* Project Progress Item Row */
.budget-project-item {
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.project-info-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 140px;
}

.budget-proj-name {
  font-size: 14.5px;
  font-weight: 700;
  color: #0f172a;
}

.badge-fixed-tag {
  font-size: 10px;
  font-weight: 700;
  color: #7e22ce;
  background: #f3e8ff;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

.project-progress-mid {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  max-width: 450px;
}

.budget-bar-track {
  flex: 1;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}

.budget-bar-fill {
  height: 100%;
  background: #1d72f2;
}

.budget-pct-text {
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
  min-width: 28px;
}

.project-budget-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.spent-breakdown {
  text-align: right;
}

.spent-breakdown .spent-amt {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.spent-breakdown .total-amt {
  font-size: 11px;
  color: #94a3b8;
}

.remaining-amt-badge {
  font-size: 13.5px;
  font-weight: 700;
  color: #10b981;
  white-space: nowrap;
}

/* ==========================================================================
   Continuous 2-Column Section: Monthly Trend & At a Glance
   ========================================================================== */
.dash-bottom-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  margin-top: 16px;
  width: 100%;
}

.trend-card,
.glance-card {
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.trend-card-header,
.glance-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.trend-title,
.glance-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.trend-subtitle {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

.trend-details-link {
  font-size: 12.5px;
  font-weight: 600;
  color: #0f172a;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.trend-details-link:hover {
  color: #1d72f2;
}

/* Trend Chart Container */
.trend-chart-container {
  position: relative;
  height: 220px;
  margin-bottom: 16px;
}

.chart-y-axis {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.y-grid-line {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.y-grid-line span {
  font-size: 10px;
  color: #94a3b8;
  width: 12px;
  text-align: right;
}

.y-grid-line .line {
  flex: 1;
  height: 1px;
  background: #f1f5f9;
}

.chart-bars-wrap {
  position: absolute;
  top: 10px;
  left: 24px;
  right: 12px;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: flex-end;
  gap: 12px;
}

.month-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  position: relative;
  border-radius: 6px;
  padding: 4px;
}

.month-col.selected-month {
  background: rgba(241, 245, 249, 0.6);
}

.bars-group {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: calc(100% - 24px);
  margin-bottom: 6px;
}

.bar-col {
  width: 14px;
  border-radius: 3px 3px 0 0;
  position: relative;
  transition: height 0.3s ease;
}

.bar-col.created {
  background: #6366f1;
}

.bar-col.completed {
  background: #10b981;
}

.bar-col.in-progress {
  background: #f59e0b;
}

.bar-val-top {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10.5px;
  font-weight: 700;
  color: #475569;
}

.month-lbl {
  font-size: 10.5px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}

/* Hover Tooltip */
.chart-tooltip {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  background: #0f172a;
  color: #ffffff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 11px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  z-index: 50;
  white-space: nowrap;
  pointer-events: none;
}

.tooltip-title {
  font-weight: 700;
  margin-bottom: 6px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 4px;
}

.tooltip-item {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  color: #cbd5e1;
}

.tooltip-item .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.tooltip-item .dot.created {
  background: #6366f1;
}

.tooltip-item .dot.completed {
  background: #10b981;
}

.tooltip-item .dot.in-progress {
  background: #f59e0b;
}

.trend-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-size: 11.5px;
  color: #475569;
  font-weight: 500;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.legend-dot.created {
  background: #6366f1;
}

.legend-dot.completed {
  background: #10b981;
}

.legend-dot.in-progress {
  background: #f59e0b;
}

/* At a Glance Section Styles */
.glance-sec-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: #94a3b8;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.glance-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.glance-label {
  font-size: 12px;
  color: #475569;
  font-weight: 500;
  min-width: 85px;
}

.glance-track {
  flex: 1;
  height: 6px;
  background: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
}

.glance-fill {
  height: 100%;
  border-radius: 3px;
}

.glance-count-arrow {
  font-size: 11.5px;
  color: #64748b;
  min-width: 65px;
  text-align: right;
  cursor: pointer;
}

.glance-count-arrow:hover {
  color: #1d72f2;
}

/* Recent Activity Styles */
.activity-card,
.trends-area-card {
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.activity-card-header,
.trends-area-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.activity-title,
.trends-area-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.activity-subtitle,
.trends-area-subtitle {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
}

.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

.activity-dot.purple {
  background: #8b5cf6;
}

.activity-dot.blue {
  background: #3b82f6;
}

.activity-dot.green {
  background: #10b981;
}

.activity-content {
  flex: 1;
}

.activity-heading {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

.activity-desc {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

.activity-desc strong {
  color: #1e293b;
  font-weight: 600;
}

.activity-time {
  font-size: 11.5px;
  color: #94a3b8;
  white-space: nowrap;
}

/* Project Trends Smooth Area Line Chart */
.area-chart-container {
  position: relative;
  width: 100%;
}

.area-chart-svg {
  width: 100%;
  height: 180px;
  overflow: visible;
}

/* Status Donut Card Styles */
.status-card,
.upcoming-card,
.priority-card,
.category-card {
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.status-card-header,
.upcoming-card-header,
.priority-card-header,
.category-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.status-title,
.upcoming-title,
.priority-title,
.category-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.status-subtitle,
.upcoming-subtitle,
.priority-subtitle,
.category-subtitle {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

.donut-status-wrap {
  display: flex;
  align-items: center;
  gap: 32px;
}

.donut-chart-box {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.donut-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.donut-center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.donut-num {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}

.donut-lbl {
  font-size: 9.5px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

.status-legend-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.status-legend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
}

.status-left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #334155;
  font-weight: 500;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-dot.green {
  background: #10b981;
}

.status-dot.blue {
  background: #2563eb;
}

.status-dot.orange {
  background: #f59e0b;
}

.status-dot.gray {
  background: #94a3b8;
}

.status-dot.red {
  background: #ef4444;
}

.status-right {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #64748b;
  font-size: 12px;
}

.status-right .count {
  font-weight: 700;
  color: #0f172a;
}

.status-right .arrow {
  color: #94a3b8;
}

/* Upcoming Empty State */
.upcoming-empty-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 12px;
  text-align: center;
}

.upcoming-empty-text {
  font-size: 12.5px;
  color: #94a3b8;
  margin-top: 8px;
}

/* Priority Breakdown Styles */
.priority-bars-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  align-items: flex-end;
  height: 160px;
  padding-top: 10px;
}

.priority-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.priority-val {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}

.priority-bar-holder {
  height: 100px;
  display: flex;
  align-items: flex-end;
  width: 100%;
  justify-content: center;
}

.p-bar-dash {
  width: 32px;
  height: 3px;
  border-radius: 2px;
}

.p-bar-dash.critical {
  background: #ef4444;
}

.p-bar-dash.high {
  background: #b91c1c;
}

.p-bar-dash.medium {
  background: #f59e0b;
}

.p-bar-dash.low {
  background: #10b981;
}

.p-bar-tall.unset {
  width: 36px;
  background: linear-gradient(180deg, #64748b 0%, #334155 100%);
  border-radius: 6px 6px 0 0;
}

.priority-label {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  margin-top: 8px;
}

.priority-pct {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 2px;
}

/* Category Breakdown Styles */
.category-content-wrap {
  padding: 16px 0;
}

.category-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.category-name {
  font-size: 12.5px;
  color: #475569;
  font-weight: 500;
  min-width: 90px;
}

.category-track {
  flex: 1;
  height: 6px;
  background: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
}

.category-fill {
  height: 100%;
  background: #6366f1;
  border-radius: 3px;
}

.category-count-arrow {
  font-size: 12px;
  color: #64748b;
  min-width: 70px;
  text-align: right;
  cursor: pointer;
}

.category-count-arrow:hover {
  color: #1d72f2;
}

/* Budget vs Spend Card Styles */
.spend-card,
.perf-card {
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.spend-card-header,
.perf-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.spend-title,
.perf-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.spend-subtitle,
.perf-subtitle {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

.spend-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.spend-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.spend-stat-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 4px;
}

.spend-stat-num {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.spend-stat-num.green {
  color: #10b981;
}

.spend-track-wrap {
  margin-bottom: 14px;
}

.spend-track-bar {
  width: 100%;
  height: 6px;
  background: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
}

.spend-track-fill {
  height: 100%;
  background: #10b981;
}

.spend-footer-text {
  font-size: 12px;
  color: #64748b;
}

/* Employee Performance Styles */
.perf-empty-body {
  padding: 40px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.perf-empty-text {
  font-size: 13px;
  font-weight: 500;
  color: #94a3b8;
}

/* ==========================================================================
   PROJECTS EXPLORER PAGE (projects.php - Exact Replica of Screenshot)
   ========================================================================== */
.projects-page-container {
  padding: 0 24px 64px 24px;
  flex: 1;
}

.projects-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 0;
  margin: 0 0 12px 0;
  position: sticky;
  top: 56px;
  background: var(--bg-app);
  z-index: 80;
}

.projects-title-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.title-accent-bar {
  width: 3.5px;
  height: 18px;
  background: #1d72f2;
  border-radius: 2px;
}

.projects-title-left h1 {
  font-size: 19px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.projects-count-pill {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  padding: 2px 7px;
  border-radius: 12px;
}

.projects-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-proj-pill {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-proj-pill:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.view-toggle-group {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 2px;
}

.view-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  background: none;
  color: #64748b;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.view-btn.active {
  background: #1d72f2;
  color: #ffffff;
}

.view-btn.active .material-symbols-rounded {
  color: #ffffff;
}

.btn-create-proj-blue {
  background: #1d72f2;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-create-proj-blue:hover {
  background: #1557bf;
}

.btn-proj-more {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 7px;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-proj-more:hover {
  background: #f8fafc;
  color: #0f172a;
}

/* 4-Column Project Card Grid */
.projects-grid-4col {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

@media (min-width: 1440px) {
  .projects-grid-4col {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}

.empty-projects-state {
  grid-column: 1 / -1;
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  padding: 36px 24px;
  text-align: center;
}

.project-tile-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 245px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.project-tile-card:hover {
  transform: translateY(-2px);
  border-color: #93c5fd;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.08);
}

.tile-top-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.tile-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.tile-icon-box {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  flex-shrink: 0;
}

.tile-title-text-wrap {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tile-name {
  font-size: 14.5px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.tile-name a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.tile-name a:hover {
  color: #2563eb;
}

.tile-code-badge {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 4px;
  display: inline-block;
  width: fit-content;
  border: 1px solid #e2e8f0;
  line-height: 1.2;
}

.tile-menu-btn {
  background: none;
  border: 1px solid #e2e8f0;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  flex-shrink: 0;
  transition: all 0.15s;
}

.tile-menu-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}

.project-tile-card.menu-active,
tr.menu-active {
  z-index: 1050 !important;
  position: relative;
}

.tile-menu-wrap {
  position: relative;
  display: inline-block;
}

.proj-action-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 14px 35px -4px rgba(0, 0, 0, 0.18), 0 6px 14px -3px rgba(0, 0, 0, 0.08);
  min-width: 195px;
  width: max-content;
  max-width: 240px;
  padding: 6px 0;
  z-index: 1050;
  display: none;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.proj-action-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 14px;
  background: none;
  border: none;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  text-decoration: none;
  box-sizing: border-box;
  white-space: nowrap;
}

.proj-action-item:hover {
  background: #f8fafc;
  color: #2563eb;
}

.proj-action-item .material-symbols-rounded {
  font-size: 18px;
  color: #64748b;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.proj-action-item:hover .material-symbols-rounded {
  color: #2563eb;
}

/* Badges & Status Section */
.tile-badges-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.tile-approval-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  padding: 5px 8px;
  border-radius: 7px;
}

.tile-approval-btn-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-approval-quick {
  border: none;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  transition: all 0.15s;
}

.btn-approval-quick.approve {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.btn-approval-quick.approve:hover {
  background: #d1fae5;
  border-color: #6ee7b7;
}

.btn-approval-quick.reject {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.btn-approval-quick.reject:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

.tile-status-sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.tile-status-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
}

.tile-status-tag.in-progress {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.tile-status-tag.planning {
  background: #faf5ff;
  color: #7c3aed;
  border: 1px solid #ddd6fe;
}

.tile-status-tag.completed {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.tile-status-tag.on_hold,
.tile-status-tag.on-hold {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
}

.tile-status-tag.archived {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.subproject-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.subproject-badge-pill:hover {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1e40af;
}

.subproject-badge-pill.zero-sub {
  background: #f8fafc;
  color: #64748b;
  border: 1px dashed #cbd5e1;
}

.subproject-badge-pill.zero-sub:hover {
  border-color: #93c5fd;
  color: #2563eb;
  background: #eff6ff;
  border-style: solid;
}

.tile-description {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 34px;
}

.tile-meta-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: #64748b;
  font-weight: 500;
}

.tile-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tile-progress-section {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.progress-labels-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.prog-lbl {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}

.prog-val {
  font-size: 11.5px;
  font-weight: 700;
  color: #0f172a;
}

.tile-bar-track {
  width: 100%;
  height: 4px;
  background: #f1f5f9;
  border-radius: 9999px;
  overflow: hidden;
}

.tile-bar-fill {
  height: 100%;
  background: #2563eb;
  border-radius: 9999px;
}

.tile-owner-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
}

.owner-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #2563eb;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.owner-name {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   PROJECT OWNER HOVER & TEAM MEMBERS POPOVER
   ========================================================================== */
.proj-owner-hover-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 3px 6px;
  margin: -3px -6px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.proj-owner-hover-wrap:hover {
  background: #f1f5f9;
}

.owner-name-text {
  font-size: 12.5px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
}

.proj-member-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
  border-radius: 9999px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
}

.proj-members-popover {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  width: 250px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.14), 0 8px 10px -6px rgba(15, 23, 42, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1050;
  pointer-events: none;
}

.proj-owner-hover-wrap:hover .proj-members-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.proj-members-popover::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 18px;
  width: 10px;
  height: 10px;
  background: #ffffff;
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  transform: rotate(45deg);
}

.pmp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 12px 12px 0 0;
}

.pmp-count {
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  padding: 1px 7px;
  border-radius: 9999px;
}

.pmp-body {
  padding: 6px 8px;
  max-height: 220px;
  overflow-y: auto;
}

.pmp-member-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  transition: background 0.12s ease;
}

.pmp-member-item:hover {
  background: #f8fafc;
}

.pmp-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pmp-info {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.pmp-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pmp-role {
  font-size: 10.5px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pmp-role.owner {
  color: #2563eb;
  font-weight: 600;
}

/* Bottom Pagination Fixed Bar */
.projects-bottom-pagination {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-w);
  right: 0;
  background: #ffffff;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  font-size: 12.5px;
  color: #64748b;
  z-index: 90;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.02);
  transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-sidebar.collapsed ~ .app-body .projects-bottom-pagination,
.app-body.collapsed .projects-bottom-pagination {
  left: 56px;
}

.pagin-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagin-select-wrap select {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  outline: none;
  cursor: pointer;
}

.pagin-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pagin-btn-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagin-btn {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.pagin-btn:hover:not(:disabled) {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

.pagin-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagin-btn.active {
  background: #1d72f2;
  border-color: #1d72f2;
  color: #ffffff;
}

/* ==========================================================================
   TASKS EXPLORER PAGE (tasks.php - Exact Replica of Screenshot)
   ========================================================================== */
.tasks-page-container {
  padding: 0 24px 64px 24px;
  flex: 1;
}

.tasks-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 12px 0;
  margin: 0 0 14px 0;
  position: sticky;
  top: 56px;
  background: var(--bg-app);
  z-index: 80;
}

.tasks-tabs-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tab-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tab-pill-btn:hover {
  background: #eef2f6;
  color: #0f172a;
}

.tab-pill-btn.active {
  background: #1d72f2;
  color: #ffffff;
}

.tab-count-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 1.5px 7px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #64748b;
}

.tab-pill-btn.active .tab-count-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.tasks-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tasks-search-wrap {
  position: relative;
}

.tasks-search-wrap .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #94a3b8;
  pointer-events: none;
}

.tasks-search-input {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 12px 6px 32px;
  font-size: 12.5px;
  font-family: inherit;
  color: #0f172a;
  outline: none;
  width: 220px;
  transition: border-color 0.15s;
}

.tasks-search-input:focus {
  border-color: #1d72f2;
}

.btn-task-action {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-task-action:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

/* Tasks Filters Dropdown (Matching Screenshot) */
.tasks-filters-dropdown-container {
  position: relative !important;
  display: inline-block !important;
}

.tasks-filters-dropdown-menu {
  display: none;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  width: 440px !important;
  max-width: 92vw !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.15), 0 0 1px 1px rgba(0,0,0,0.05) !important;
  padding: 22px 24px !important;
  z-index: 9999 !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

.tasks-filters-dropdown-menu.show {
  display: block !important;
  animation: taskFilterDropdownAnim 0.15s ease-out;
}

@keyframes taskFilterDropdownAnim {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tasks-filters-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
}

.tasks-filters-modal-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  letter-spacing: 0.04em !important;
}

.btn-filters-close {
  background: transparent !important;
  border: none !important;
  color: #64748b !important;
  cursor: pointer !important;
  padding: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  transition: all 0.15s !important;
}

.btn-filters-close:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.filter-section-row {
  display: flex !important;
  align-items: flex-start !important;
  margin-bottom: 14px !important;
}

.filter-row-label {
  width: 75px !important;
  flex-shrink: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  letter-spacing: 0.05em !important;
  padding-top: 6px !important;
}

.filter-pills-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  flex: 1 !important;
}

.filter-pill-btn {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 5px 14px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  line-height: 1.3 !important;
  user-select: none !important;
}

.filter-pill-btn:hover {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
  color: #0f172a !important;
}

.filter-pill-btn.active {
  border: 1.5px solid #2563eb !important;
  color: #1e293b !important;
  background: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.12) !important;
}

.filters-divider {
  border: none !important;
  border-top: 1px solid #f1f5f9 !important;
  margin: 18px 0 14px 0 !important;
}

.advanced-filters-accordion-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  user-select: none !important;
  color: #0f172a !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
  transition: color 0.15s !important;
}

.advanced-filters-accordion-toggle:hover {
  color: #2563eb !important;
}

.accordion-arrow-icon {
  font-size: 18px !important;
  color: #64748b !important;
  transition: transform 0.2s ease !important;
}

.advanced-filters-accordion-toggle.open .accordion-arrow-icon {
  transform: rotate(180deg) !important;
}

.advanced-filters-content {
  background: #f8fafc !important;
  border: 1px solid #eef2f6 !important;
  border-radius: 10px !important;
  padding: 12px !important;
  margin-bottom: 16px !important;
}

.advanced-filters-rows-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.adv-filter-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.adv-filter-select-field,
.adv-filter-select-val {
  flex: 1 !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  color: #1e293b !important;
  outline: none !important;
}

.adv-filter-select-field:focus,
.adv-filter-select-val:focus {
  border-color: #2563eb !important;
}

.btn-remove-filter-rule {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  padding: 4px !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s !important;
}

.btn-remove-filter-rule:hover {
  color: #ef4444 !important;
  background: #fee2e2 !important;
}

.filters-action-buttons-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 18px !important;
  gap: 12px !important;
}

.btn-add-filter {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #eff6ff !important;
  color: #2563eb !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}

.btn-add-filter:hover {
  background: #dbeafe !important;
  border-color: #93c5fd !important;
}

.btn-apply-filters {
  background: #2563eb !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 24px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2) !important;
  transition: background 0.15s ease, transform 0.05s !important;
}

.btn-apply-filters:hover {
  background: #1d4ed8 !important;
}

.btn-apply-filters:active {
  transform: scale(0.98) !important;
}

.btn-clear-all-filters {
  width: 100% !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 0 !important;
  text-align: center !important;
  cursor: pointer !important;
  margin-top: 14px !important;
  transition: all 0.15s !important;
}

.btn-clear-all-filters:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

.filter-active-count-badge {
  background: #2563eb !important;
  color: #ffffff !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 1px 6px !important;
  border-radius: 10px !important;
  margin-left: 4px !important;
}

/* Tasks Columns Selector Dropdown (Matching Screenshot) */
.tasks-columns-dropdown-container {
  position: relative;
  display: inline-block;
}

.tasks-columns-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 215px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
  padding: 16px 14px 14px 16px;
  z-index: 1050;
  box-sizing: border-box;
}

.tasks-columns-dropdown-menu.show {
  display: block;
  animation: taskColFadeIn 0.15s ease-out;
}

@keyframes taskColFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tasks-columns-dropdown-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.tasks-columns-dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tasks-col-checkbox-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  user-select: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: color 0.15s ease !important;
}

.tasks-col-checkbox-item:hover .tasks-col-label {
  color: #0f172a !important;
}

/* Custom Checkbox Design matching screenshot */
.tasks-col-checkbox-item input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  cursor: pointer !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
}

.tasks-col-custom-box {
  position: relative !important;
  width: 17px !important;
  height: 17px !important;
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}

.tasks-col-checkbox-item input[type="checkbox"]:checked ~ .tasks-col-custom-box {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
}

.tasks-col-custom-box::after {
  content: "" !important;
  position: absolute !important;
  display: none !important;
  left: 4.5px !important;
  top: 1.5px !important;
  width: 4.5px !important;
  height: 8.5px !important;
  border: solid #ffffff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

.tasks-col-checkbox-item input[type="checkbox"]:checked ~ .tasks-col-custom-box::after {
  display: block !important;
}

.tasks-col-label {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.tasks-columns-dropdown-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #f8fafc;
}

.btn-tasks-col-reset {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: all 0.15s;
}

.btn-tasks-col-reset:hover {
  color: #0f172a;
}

.btn-tasks-col-done {
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 18px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2);
}

.btn-tasks-col-done:hover {
  background: #1d4ed8;
}

.btn-tasks-col-done:active {
  transform: scale(0.98);
}

/* Tasks Data Table Card */
.tasks-table-card {
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

.tasks-table-responsive {
  width: 100%;
  overflow-x: auto;
}

.tasks-data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.tasks-data-table thead tr {
  border-bottom: 1px solid #f1f5f9;
}

.tasks-data-table th {
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.04em;
  background: #ffffff;
  white-space: nowrap;
}

.tasks-data-table th .sort-icon {
  font-size: 11px;
  color: #94a3b8;
  margin-left: 4px;
}

.tasks-data-table tbody tr {
  border-bottom: 1px solid #f8fafc;
  transition: background 0.15s;
}

.tasks-data-table tbody tr:hover {
  background: #f8fafc;
}

.tasks-data-table tbody tr:last-child {
  border-bottom: none;
}

.tasks-data-table td {
  padding: 12px 16px;
  font-size: 13px;
  vertical-align: middle;
}

.task-id-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2563eb;
  font-weight: 600;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.task-id-icon {
  font-size: 16px;
  color: #3b82f6;
}

.cell-task-title {
  font-weight: 600;
  color: #0f172a;
}

.subtask-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #eff6ff;
  color: #2563eb;
  font-size: 10.5px;
  font-weight: 700;
  margin-left: 6px;
}

.project-link-name {
  color: #334155;
  font-weight: 500;
}

.cell-board-name {
  color: #64748b;
  font-size: 12.5px;
}

.badge-task-type {
  font-size: 11px;
  font-weight: 600;
  background: #f3e8ff;
  color: #7e22ce;
  padding: 2.5px 9px;
  border-radius: 10px;
  display: inline-block;
}

.badge-status-pill {
  font-size: 11.5px;
  font-weight: 500;
}

.badge-status-pill.status-new {
  color: #475569;
}

.badge-status-pill.status-in-progress {
  background: #eff6ff;
  color: #2563eb;
  padding: 2.5px 9px;
  border-radius: 10px;
  font-weight: 600;
}

.badge-status-pill.status-review {
  background: #fef3c7;
  color: #d97706;
  padding: 2.5px 9px;
  border-radius: 10px;
  font-weight: 600;
}

.badge-status-pill.status-completed {
  background: #ecfdf5;
  color: #059669;
  padding: 2.5px 9px;
  border-radius: 10px;
  font-weight: 600;
}

.badge-priority-text {
  font-size: 12px;
  font-weight: 600;
}

.badge-priority-text.prio-medium { color: #d97706; }
.badge-priority-text.prio-high,
.badge-priority-text.prio-urgent,
.badge-priority-text.prio-critical { color: #dc2626; }
.badge-priority-text.prio-low { color: #10b981; }

.table-user-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.table-avatar-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #eff6ff;
  color: #2563eb;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.table-avatar-circle.alt {
  background: #f1f5f9;
  color: #475569;
}

.table-user-name {
  font-size: 12.5px;
  font-weight: 500;
  color: #334155;
  white-space: nowrap;
}

.cell-date {
  font-size: 12.5px;
  color: #64748b;
  white-space: nowrap;
}

.cell-hours {
  font-size: 12.5px;
  color: #64748b;
  white-space: nowrap;
}

.hours-num {
  font-weight: 600;
  color: #334155;
}

.hours-num.logged-positive {
  color: #059669;
}

/* Bottom Pagination Fixed Bar for Tasks */
.tasks-bottom-pagination {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-w);
  right: 0;
  background: #ffffff;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  font-size: 12.5px;
  color: #64748b;
  z-index: 90;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.02);
  transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-sidebar.collapsed ~ .app-body .tasks-bottom-pagination,
.app-body.collapsed .tasks-bottom-pagination {
  left: 56px;
}

/* ==========================================================================
   FEEDBACK PAGE (feedback.php - Exact Replica of Screenshot)
   ========================================================================== */
.feedback-page-container {
  padding: 24px 32px 48px 32px;
  flex: 1;
}

.feedback-header-block {
  margin-bottom: 20px;
}

.feedback-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.feedback-title-row .title-accent-bar {
  width: 3.5px;
  height: 20px;
  background: #1d72f2;
  border-radius: 2px;
}

.feedback-title-row h1 {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.feedback-subtitle {
  font-size: 13px;
  color: #64748b;
  margin-top: 6px;
  margin-bottom: 0;
}

/* Horizontal Tabs with Active Underline */
.feedback-tabs-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid #eef2f6;
  margin-top: 18px;
  margin-bottom: 28px;
}

.feedback-tab-btn {
  background: none;
  border: none;
  padding: 8px 4px 12px 4px;
  font-size: 13.5px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  position: relative;
  transition: color 0.15s;
}

.feedback-tab-btn:hover {
  color: #0f172a;
}

.feedback-tab-btn.active {
  color: #0f172a;
  font-weight: 700;
}

.feedback-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2.5px;
  background: #1d72f2;
  border-radius: 2px 2px 0 0;
}

/* Empty State Card with Dashed Border */
.feedback-empty-card {
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  padding: 72px 24px;
  text-align: center;
}

.feedback-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #eff6ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.feedback-star-icon {
  font-size: 24px;
  color: #2563eb;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.feedback-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px 0;
}

.feedback-empty-desc {
  font-size: 13px;
  color: #64748b;
  max-width: 460px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ==========================================================================
   PLANNING PAGE (planning.php - Exact Replica of Screenshot)
   ========================================================================== */
.planning-split-layout {
  display: flex;
  flex: 1;
  height: calc(100vh - 56px);
  max-height: calc(100vh - 56px);
  overflow: hidden;
  background: #ffffff;
}

/* Left Sidebar Projects Tree */
.planning-left-sidebar {
  width: 260px;
  background: #ffffff;
  border-right: 1px solid #eef2f6;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  flex-shrink: 0;
}

.plan-search-header {
  padding: 14px 14px 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.plan-search-box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 10px;
}

.plan-search-box input {
  border: none;
  background: none;
  outline: none;
  font-size: 12.5px;
  font-family: inherit;
  color: #0f172a;
  width: 100%;
}

.btn-tree-collapse {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  cursor: pointer;
}

.btn-tree-collapse:hover {
  background: #f8fafc;
  color: #0f172a;
}

.plan-tree-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 8px 16px;
  flex-shrink: 0;
}

.tree-heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #64748b;
}

.tree-count-pill {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  padding: 1.5px 6px;
  border-radius: 10px;
}

.plan-tree-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 8px;
}

.plan-tree-scroll::-webkit-scrollbar {
  width: 5px;
}

.plan-tree-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.plan-tree-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.plan-tree-scroll::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.tree-item-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 6px;
  margin-bottom: 2px;
  transition: all 0.15s;
  position: relative;
}

.tree-item-wrap:hover {
  background: #f8fafc;
}

.tree-item-wrap.selected {
  background: #eff6ff;
}

.tree-item-wrap.selected::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: #1d72f2;
  border-radius: 2px;
}

.tree-item-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #334155;
  font-size: 13px;
  font-weight: 500;
  flex: 1;
  min-width: 0;
}

.tree-item-wrap.selected .tree-name {
  font-weight: 700;
  color: #0f172a;
}

.tree-chevron-btn {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #94a3b8;
  border-radius: 4px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.tree-chevron-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1e293b;
}

.tree-chevron {
  font-size: 15px;
  color: #94a3b8;
  transition: transform 0.15s ease;
}

.tree-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tree-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-tree-add-sub {
  background: #e0e7ff;
  border: none;
  color: #1e1b4b;
  cursor: pointer;
  padding: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.btn-tree-add-sub:hover {
  background: #c7d2fe;
  color: #0f172a;
}

.tree-sub-items-group {
  padding-left: 26px;
  margin: 2px 0 6px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}

.tree-sub-items-group::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 0;
  bottom: 8px;
  width: 1px;
  background: #e2e8f0;
}

/* Inline New Board Creation (Exact Replica of Screenshot) */
.tree-new-board-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}

.tree-new-board-input {
  flex: 1;
  background: #ffffff;
  border: 1.5px solid #93c5fd;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-family: inherit;
  color: #0f172a;
  outline: none;
  box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.2);
  width: 100%;
  box-sizing: border-box;
}

.tree-new-board-input::placeholder {
  color: #94a3b8;
}

.tree-sub-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  font-size: 12.5px;
  color: #475569;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: all 0.12s ease;
}

.tree-sub-item:hover {
  background: #f8fafc;
  color: #0f172a;
}

.tree-sub-item.active {
  color: #1d72f2;
  font-weight: 600;
  background: #eff6ff;
  border: 1px solid #dbeafe;
}

.tree-sub-item-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.tree-board-edit-btn {
  opacity: 0;
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 2px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}

.tree-sub-item:hover .tree-board-edit-btn {
  opacity: 1;
}

.tree-board-bullet {
  color: #94a3b8;
  font-size: 14px;
}

.plan-tree-footer {
  padding: 12px 14px;
  border-top: 1px solid #f1f5f9;
  background: #ffffff;
  flex-shrink: 0;
  z-index: 10;
}

.btn-plan-new-proj {
  width: 100%;
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.btn-plan-new-proj:hover {
  background: #1d4ed8;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.btn-tree-expand-bottom {
  display: none;
}

/* Collapsed Rail Elements (Shown in Screenshot 2) */
.plan-collapsed-top-icon {
  display: none;
}

.plan-collapsed-rail {
  display: none;
}

/* Collapsed Planning Sidebar State */
.planning-left-sidebar.collapsed {
  width: 52px;
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.planning-left-sidebar.collapsed .plan-search-header,
.planning-left-sidebar.collapsed .plan-tree-title-row,
.planning-left-sidebar.collapsed .plan-tree-scroll,
.planning-left-sidebar.collapsed .btn-plan-new-proj {
  display: none !important;
}

.planning-left-sidebar.collapsed .plan-collapsed-top-icon {
  display: flex;
  justify-content: center;
  padding: 14px 6px;
  border-bottom: 1px solid #eef2f6;
}

.plan-chip-s {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.planning-left-sidebar.collapsed .plan-collapsed-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  flex: 1;
  overflow-y: auto;
}

.plan-chip-item {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 2px;
  transition: transform 0.15s;
}

.plan-chip-item:hover {
  transform: scale(1.08);
}

.plan-chip-box {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan-chip-item.selected .plan-chip-box {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.planning-left-sidebar.collapsed .plan-tree-footer {
  padding: 10px 4px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  justify-content: center;
}

.planning-left-sidebar.collapsed .btn-tree-expand-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.planning-left-sidebar.collapsed .btn-tree-expand-bottom:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

/* Right Main Planning Area */
.planning-main-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

.plan-breadcrumbs-row {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid #eef2f6;
  background: #ffffff;
}

.plan-actions-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 24px;
  background: #ffffff;
}

.plan-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
}

.breadcrumb-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
}

.breadcrumb-pill.proj-pill {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #1e293b;
}

.breadcrumb-pill.sub-pill {
  background: #fdf4ff;
  border: 1px solid #f5d0fe;
  color: #9333ea;
}

.breadcrumb-icon-folder {
  font-size: 15px;
  color: #6366f1;
}

.breadcrumb-icon-board {
  font-size: 15px;
  color: #a855f7;
}

.breadcrumb-slash {
  color: #cbd5e1;
  font-size: 14px;
  margin: 0 2px;
}

.plan-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-plan-ctrl {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-plan-ctrl:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.plan-task-search-wrap {
  position: relative;
}

.plan-task-search-wrap .search-ico {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #94a3b8;
  pointer-events: none;
}

.plan-task-search-wrap input {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 6px 14px 6px 36px;
  font-size: 13px;
  font-family: inherit;
  color: #0f172a;
  outline: none;
  width: 190px;
  transition: border-color 0.15s;
}

.plan-task-search-wrap input:focus {
  border-color: #1d72f2;
}

.plan-ctrl-divider {
  width: 1px;
  height: 20px;
  background: #e2e8f0;
  margin: 0 4px;
}

.btn-plan-gear {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
}

.btn-plan-gear:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* ==========================================================================
   PLANNING TOOLBAR COMPONENTS (Map, Filter, Export, Settings)
   ========================================================================== */
/* 1. Map Statuses Modal */
.map-status-dialog {
  max-width: 540px;
  width: 100%;
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.14);
}

.map-status-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}

.map-status-title {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.map-status-desc {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 20px;
}

.map-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.map-status-label {
  font-size: 13.5px;
  font-weight: 600;
  color: #1e293b;
  width: 120px;
}

.map-status-arrow {
  color: #94a3b8;
  font-size: 16px;
}

.map-status-select-wrap {
  width: 220px;
  position: relative;
}

.map-status-select {
  width: 100%;
  padding: 8px 12px 8px 30px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #0f172a;
  background: #ffffff;
  outline: none;
  cursor: pointer;
  appearance: none;
}

.map-status-select:focus {
  border-color: #2563eb;
}

.map-status-dot {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
}

.map-dot-todo { background: #64748b; }
.map-dot-prog { background: #2563eb; }
.map-dot-done { background: #10b981; }

.map-status-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}

/* 2. Planning Filter Popover */
.plan-flt-popover-wrap {
  position: relative;
}

.plan-flt-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 440px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  padding: 16px 20px;
  z-index: 1000;
  display: none;
}

.plan-flt-popover.open {
  display: block;
}

.plan-flt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.plan-flt-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plan-flt-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.plan-flt-select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12px;
  color: #0f172a;
  background: #ffffff;
  outline: none;
  cursor: pointer;
}

.plan-flt-select:focus {
  border-color: #2563eb;
}

.plan-flt-sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.plan-flt-title-info {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 4px;
}

.plan-flt-saved-select {
  padding: 6px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12px;
  color: #0f172a;
  background: #ffffff;
}

.plan-flt-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f1f5f9;
  padding-top: 12px;
}

.btn-plan-add-filter {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
}

.btn-plan-add-filter:hover {
  background: #f1f5f9;
}

.btn-plan-flt-apply {
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 6px 18px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.btn-plan-flt-apply:hover {
  background: #1d4ed8;
}

/* 3. Export Dropdown Menu */
.plan-export-wrap {
  position: relative;
}

.plan-export-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 180px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  padding: 6px 0;
  z-index: 1000;
  display: none;
}

.plan-export-dropdown.open {
  display: block;
}

.plan-export-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 13px;
  color: #1e293b;
  cursor: pointer;
  transition: background 0.12s;
  text-decoration: none;
}

.plan-export-item:hover {
  background: #f8fafc;
  color: #2563eb;
}

/* 4. Gantt Settings Drawer */
.gantt-settings-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  max-width: 90vw;
  height: 100vh;
  background: #ffffff;
  z-index: 9996;
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.12);
  animation: slideDrawerIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.gantt-settings-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
}

.gantt-settings-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-gantt-round-close,
.btn-gantt-round-back {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #475569;
  transition: all 0.15s;
}

.btn-gantt-round-close:hover,
.btn-gantt-round-back:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
}

.gantt-settings-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.gantt-fields-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 24px;
  transition: background 0.15s, border-color 0.15s;
}

.gantt-fields-row:hover {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.gantt-fields-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #1e293b;
}

.gantt-fields-badge {
  background: #eff6ff;
  color: #2563eb;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.gantt-sec-title {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 14px 0;
}

.gantt-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.gantt-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #334155;
  font-weight: 500;
}

/* ==========================================================================
   FIELDS MANAGEMENT DRAWER (Exact Replica of Screenshots 2 & 3)
   ========================================================================== */
.gantt-tabs-nav {
  display: flex;
  border-bottom: 1px solid #eef2f6;
  background: #ffffff;
}

.gantt-tab-btn {
  flex: 1;
  padding: 12px 0;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  border: none;
  background: none;
  color: #64748b;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
}

.gantt-tab-btn:hover {
  color: #0f172a;
}

.gantt-tab-btn.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
}

.gantt-search-container {
  padding: 16px 20px 8px 20px;
}

.gantt-search-input-wrap {
  position: relative;
  width: 100%;
}

.gantt-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 18px;
}

.gantt-search-input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12.5px;
  color: #0f172a;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.gantt-search-input:focus {
  border-color: #2563eb;
}

.gantt-fields-content {
  flex: 1;
  overflow-y: auto;
  padding: 10px 20px 20px 20px;
}

.gantt-fields-sec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0 10px 0;
}

.gantt-fields-sec-title {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.btn-gantt-hide-all {
  background: none;
  border: none;
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.btn-gantt-hide-all:hover {
  text-decoration: underline;
}

.gantt-field-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f8fafc;
}

.gantt-field-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #1e293b;
  font-weight: 500;
}

.gantt-drag-handle {
  color: #cbd5e1;
  font-size: 15px;
  cursor: grab;
  user-select: none;
}

.gantt-field-icon {
  font-size: 16px;
  color: #64748b;
  width: 18px;
  text-align: center;
}

.gantt-always-on {
  font-size: 10.5px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Field Types List (Create New Tab - Screenshot 3) */
.gantt-field-type-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}

.gantt-field-type-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: #334155;
  font-size: 13.5px;
  font-weight: 500;
  user-select: none;
}

.gantt-field-type-card:hover {
  background: #f8fafc;
  color: #0f172a;
}

.gantt-field-type-icon {
  font-size: 18px;
  color: #64748b;
  width: 20px;
  text-align: center;
}

/* ==========================================================================
   CREATE FIELD FORM VIEW (Exact Match to Screenshot)
   ========================================================================== */
.btn-back-field-types {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin-bottom: 20px;
  transition: all 0.15s;
  width: fit-content;
}

.btn-back-field-types:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.cf-form-group {
  margin-bottom: 18px;
}

.cf-form-label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: #475569;
  margin-bottom: 6px;
}

.cf-form-input {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13.5px;
  color: #0f172a;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.cf-form-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.cf-form-input::placeholder {
  color: #94a3b8;
}

.cf-form-input.readonly {
  background: #f8fafc;
  color: #334155;
  cursor: default;
}

.cf-segmented-group {
  display: flex;
  gap: 12px;
}

.cf-segment-btn {
  flex: 1;
  padding: 10px 0;
  border-radius: 8px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  transition: all 0.15s;
}

.cf-segment-btn.active {
  border: 1.5px solid #3b82f6;
  background: #eff6ff;
  color: #2563eb;
  font-weight: 600;
}

.cf-footer-row {
  margin-top: auto;
  border-top: 1px solid #f1f5f9;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
}

.cf-required-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #334155;
  cursor: pointer;
  user-select: none;
}

.cf-required-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  cursor: pointer;
  accent-color: #2563eb;
}

.btn-cf-submit {
  background: #93c5fd;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: not-allowed;
  transition: all 0.15s;
}

.btn-cf-submit.enabled {
  background: #2563eb;
  cursor: pointer;
}

.btn-cf-submit.enabled:hover {
  background: #1d4ed8;
}

/* ==========================================================================
   TOPBAR ACTIONS & DYNAMIC POPOVERS (Exact Match to Screenshot)
   ========================================================================== */
.top-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1000;
}

.top-actions a,
.top-nav-icon-btn,
a.top-nav-icon-btn,
a.top-nav-icon-btn:hover,
a.top-nav-icon-btn:focus,
a.top-nav-icon-btn:active,
a.top-nav-icon-btn:visited {
  background: transparent;
  border: none !important;
  border-bottom: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: none !important;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1e293b;
  cursor: pointer !important;
  position: relative;
  transition: all 0.15s ease;
}

.top-actions a:hover,
.top-nav-icon-btn:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

.top-actions a.active,
.top-nav-icon-btn.active {
  background: #eff6ff !important;
  color: #2563eb !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

.top-actions a.active .material-symbols-rounded,
.top-nav-icon-btn.active .material-symbols-rounded {
  color: #2563eb !important;
}

.top-nav-icon-btn .material-symbols-rounded {
  font-size: 22px;
  color: #1e293b;
  text-decoration: none !important;
  pointer-events: none !important;
}

/* Glowing Red Notification Badge (Exact Replica of Screenshot) */
.top-notif-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  background: #ef4444;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.55);
  pointer-events: none !important;
}

/* Header Inline Search Dropdown (Searches right there) */
.top-search-box-wrap {
  position: relative;
}

.header-inline-search-dropdown {
  position: absolute;
  top: 42px;
  left: 0;
  width: 360px;
  max-width: 90vw;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  z-index: 10000;
  max-height: 380px;
  overflow-y: auto;
  animation: slidePopover 0.15s ease;
}

.inline-search-section-label {
  padding: 8px 14px 4px 14px;
  font-size: 10.5px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.inline-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  text-decoration: none !important;
  color: #1e293b;
  transition: background 0.12s;
  cursor: pointer;
}

.inline-search-item:hover {
  background: #f8fafc;
  color: #2563eb;
}

.inline-search-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #eff6ff;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.inline-search-icon.task {
  background: #ecfdf5;
  color: #10b981;
}

.inline-search-title {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inline-search-sub {
  font-size: 11px;
  color: #64748b;
}

/* Dynamic Popovers Base */
.header-popover {
  position: fixed;
  top: 52px;
  right: 20px;
  width: 350px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  z-index: 10000;
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: slidePopover 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.header-popover-header {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
  background: #ffffff;
}

.header-popover-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
}

.header-popover-action-btn {
  background: none;
  border: none;
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.header-popover-action-btn:hover {
  text-decoration: underline;
}

.header-popover-body {
  max-height: 380px;
  overflow-y: auto;
}

/* Reminders List & Add Box */
.reminders-add-box {
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}

.reminders-input-row {
  display: flex;
  gap: 8px;
}

.reminders-input {
  flex: 1;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12.5px;
  outline: none;
}

.reminders-input:focus {
  border-color: #2563eb;
}

.btn-remind-add {
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.reminder-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #f8fafc;
  transition: background 0.12s;
}

.reminder-item:hover {
  background: #f8fafc;
}

.reminder-item.completed .reminder-title {
  text-decoration: line-through;
  color: #94a3b8;
}

.reminder-check {
  margin-top: 2px;
  cursor: pointer;
}

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

.reminder-title {
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
  margin-bottom: 2px;
}

.reminder-time {
  font-size: 11px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-reminder-del {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px;
  font-size: 14px;
}

.btn-reminder-del:hover {
  color: #ef4444;
}

/* Notification Item */
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f8fafc;
  cursor: pointer;
  transition: background 0.12s;
}

.notif-item:hover {
  background: #f8fafc;
}

.notif-item.unread {
  background: #f0f7ff;
}

.notif-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #e0e7ff;
  color: #4338ca;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notif-icon-wrap.alert {
  background: #fee2e2;
  color: #b91c1c;
}

.notif-icon-wrap.system {
  background: #f1f5f9;
  color: #475569;
}

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

.notif-title {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 2px;
}

.notif-message {
  font-size: 12px;
  color: #64748b;
  line-height: 1.35;
  margin-bottom: 4px;
}

.notif-time {
  font-size: 10.5px;
  color: #94a3b8;
}

/* Global Search Modal */
.global-search-modal-dialog {
  width: 560px;
  max-width: 92vw;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.global-search-input-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
}

.global-search-input-box input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  font-family: inherit;
  color: #0f172a;
}

.global-search-results {
  max-height: 400px;
  overflow-y: auto;
  padding: 10px 0;
}

.search-section-header {
  padding: 6px 20px;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  color: #1e293b;
  text-decoration: none;
  transition: background 0.12s;
  cursor: pointer;
}

.search-result-item:hover {
  background: #f8fafc;
  color: #2563eb;
}

/* ==========================================================================
   REMINDERS PAGE (reminders.php - Exact Replica of Screenshot)
   ========================================================================== */
.reminders-page-container {
  padding: 24px 32px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
}

.reminders-header-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.reminders-title-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.reminders-icon-box {
  width: 44px;
  height: 44px;
  background: #eff6ff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  flex-shrink: 0;
}

.reminders-heading-wrap h1 {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 2px 0;
}

.reminders-heading-wrap p {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}

.btn-new-reminder-top {
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.btn-new-reminder-top:hover {
  background: #1d4ed8;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.reminders-subnav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.reminders-tabs-group {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 10px;
  gap: 2px;
}

.reminders-tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}

.reminders-tab-pill:hover {
  color: #0f172a;
}

.reminders-tab-pill.active {
  background: #2563eb;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2);
}

.reminders-count-badge {
  background: #e2e8f0;
  color: #475569;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.reminders-tab-pill.active .reminders-count-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.btn-reminders-settings {
  width: 36px;
  height: 36px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #475569;
  transition: all 0.15s;
}

.btn-reminders-settings:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

.reminders-main-content {
  border: 1px solid #eef2f6;
  border-radius: 14px;
  background: #ffffff;
  min-height: 480px;
  padding: 32px;
  display: flex;
  flex-direction: column;
}

/* Empty State (Exact Replica of Screenshot) */
.reminders-empty-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
}

.reminders-empty-icon-box {
  width: 52px;
  height: 52px;
  background: #eff6ff;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3b82f6;
  margin-bottom: 16px;
}

.reminders-empty-title {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

.reminders-empty-subtitle {
  font-size: 13.5px;
  color: #64748b;
  margin-bottom: 20px;
}

.btn-reminders-create-empty {
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 13.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-reminders-create-empty:hover {
  background: #1d4ed8;
}

.reminders-shortcut-hint {
  margin-top: 14px;
  font-size: 12px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
}

.reminders-shortcut-hint kbd {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}

/* Reminders Populated Table / Cards List */
.reminders-items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.reminders-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  background: #ffffff;
  transition: all 0.15s ease;
}

.reminders-card-row:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.reminders-card-row.completed {
  background: #f8fafc;
  opacity: 0.75;
}

.reminders-card-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.reminders-card-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  cursor: pointer;
  accent-color: #2563eb;
}

.reminders-card-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.reminders-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}

.reminders-card-row.completed .reminders-card-title {
  text-decoration: line-through;
  color: #94a3b8;
}

.reminders-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #64748b;
}

.reminders-card-badge {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.reminders-card-badge.primary {
  background: #eff6ff;
  color: #2563eb;
}

.reminders-card-badge.other {
  background: #fef3c7;
  color: #d97706;
}

.reminders-card-badge.later {
  background: #f1f5f9;
  color: #475569;
}

.reminders-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-rem-action {
  background: none;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.12s;
}

.btn-rem-action:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

/* ==========================================================================
   NEW REMINDER MODAL (Exact Match to User's Pop-up Screenshot)
   ========================================================================== */
.nr-modal-dialog {
  width: 440px;
  max-width: 92vw;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: popoverFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.nr-modal-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
}

.nr-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nr-icon-badge {
  width: 32px;
  height: 32px;
  background: #eff6ff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
}

.nr-header-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

.nr-btn-close {
  background: none;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s;
}

.nr-btn-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.nr-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.nr-form-group {
  display: flex;
  flex-direction: column;
}

.nr-form-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 6px;
  display: block;
}

.nr-form-input {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13.5px;
  color: #0f172a;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.nr-form-input:focus,
.nr-form-textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.nr-form-input::placeholder,
.nr-form-textarea::placeholder {
  color: #94a3b8;
}

.nr-form-textarea {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13.5px;
  color: #0f172a;
  min-height: 85px;
  outline: none;
  box-sizing: border-box;
  resize: vertical;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.nr-when-inputs-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.nr-date-picker {
  flex: 3;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13.5px;
  color: #0f172a;
  outline: none;
  background: #ffffff;
}

.nr-time-picker-wrap {
  flex: 2;
  position: relative;
}

.nr-time-picker {
  width: 100%;
  border: 1.5px solid #3b82f6;
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  outline: none;
  background: #ffffff;
  cursor: pointer;
  box-sizing: border-box;
}

.nr-chips-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nr-chip-btn {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  background: #f8fafc;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s;
}

.nr-chip-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.nr-chip-btn.active {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #2563eb;
  font-weight: 600;
}

.nr-repeat-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 6px;
}

.nr-repeat-select {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13.5px;
  color: #334155;
  outline: none;
  background: #ffffff;
  cursor: pointer;
}

.nr-modal-footer {
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid #f1f5f9;
  background: #ffffff;
}

.btn-nr-cancel {
  background: none;
  border: none;
  font-size: 13.5px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 6px;
  transition: all 0.15s;
}

.btn-nr-cancel:hover {
  color: #0f172a;
  background: #f8fafc;
}

.btn-nr-submit {
  background: #bfdbfe;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: not-allowed;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}

.btn-nr-submit.enabled {
  background: #2563eb;
  color: #ffffff;
  cursor: pointer;
}

.btn-nr-submit.enabled:hover {
  background: #1d4ed8;
}

/* ==========================================================================
   SEARCH RESULTS PAGE (search.php - Exact Match to Screenshot)
   ========================================================================== */
.search-page-container {
  padding: 24px 36px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
}

.search-page-header {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

.btn-search-back {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  background: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none !important;
  transition: all 0.15s;
}

.btn-search-back:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.search-page-title {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 0 14px;
}

.search-page-divider {
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 24px;
}

.search-input-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  padding: 6px 8px 6px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.search-input-card:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.search-main-input {
  border: none;
  outline: none;
  font-size: 14px;
  color: #0f172a;
  flex: 1;
  background: transparent;
}

.search-main-input::placeholder {
  color: #94a3b8;
}

.btn-search-submit {
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 22px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-search-submit:hover {
  background: #1d4ed8;
}

/* Empty State (Exact Match to Screenshot) */
.search-empty-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
}

.search-empty-icon-box {
  width: 48px;
  height: 48px;
  background: #eff6ff;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3b82f6;
  margin-bottom: 16px;
}

.search-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

.search-empty-desc {
  font-size: 13px;
  color: #64748b;
  margin-top: 4px;
}

/* Search Results Layout */
.search-results-section {
  margin-bottom: 28px;
}

.search-section-label {
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.search-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.search-item-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: inherit;
  transition: all 0.15s ease;
}

.search-item-card:hover {
  border-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
  transform: translateY(-1px);
}

.search-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #eff6ff;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.search-item-icon.task {
  background: #ecfdf5;
  color: #10b981;
}

.search-item-title {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 2px;
}

.search-item-subtitle {
  font-size: 12px;
  color: #64748b;
}

.search-item-badges {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-pill-badge {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: #f1f5f9;
  color: #475569;
}

/* ==========================================================================
   TEMPLATES LIBRARY PAGE (templates.php - Exact Match to Screenshot)
   ========================================================================== */
.templates-page-wrap {
  padding: 24px 36px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
}

.templates-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.templates-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.templates-accent-bar {
  width: 3.5px;
  height: 20px;
  background: #2563eb;
  border-radius: 4px;
}

.templates-page-title {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.templates-filter-actions-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.templates-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.templates-search-input {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 7px 12px 7px 34px;
  font-size: 13px;
  color: #1e293b;
  background: #ffffff;
  width: 220px;
  outline: none;
  transition: border-color 0.15s;
}

.templates-search-input:focus {
  border-color: #2563eb;
}

.templates-search-icon {
  position: absolute;
  left: 10px;
  font-size: 18px;
  color: #94a3b8;
  pointer-events: none;
}

.templates-industry-select {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  color: #334155;
  background: #ffffff;
  cursor: pointer;
  outline: none;
  font-weight: 500;
}

.templates-industry-select:focus {
  border-color: #2563eb;
}

.btn-archived-templates {
  border: 1px solid #93c5fd;
  color: #1e293b;
  background: #ffffff;
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-archived-templates:hover {
  background: #eff6ff;
  border-color: #3b82f6;
}

.btn-archived-templates.active {
  background: #eff6ff;
  border-color: #2563eb;
  color: #2563eb;
}

.btn-create-template {
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-create-template:hover {
  background: #1d4ed8;
}

/* Template Card Item (Exact Match to Screenshot) */
.template-cards-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.template-card-item {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  cursor: pointer;
}

.template-card-item:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.template-card-left {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-width: 0;
}

.template-icon-box {
  width: 44px;
  height: 44px;
  background: #eff6ff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  font-size: 22px;
  flex-shrink: 0;
}

.template-main-info {
  flex: 1;
  min-width: 0;
}

.template-title-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.template-name {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.template-industry-badge {
  background: #eff6ff;
  color: #2563eb;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.template-desc {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.45;
  margin: 0;
}

.template-card-right {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
  margin-left: 20px;
}

.template-stat-group {
  display: flex;
  align-items: center;
  gap: 20px;
}

.template-stat-item {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
}

.template-stat-item span {
  font-weight: 400;
  color: #64748b;
  margin-left: 4px;
}

.template-actions-dropdown-wrap {
  position: relative;
}

.btn-template-more {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.15s;
}

.btn-template-more:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.template-menu-popover {
  position: absolute;
  top: 100%;
  right: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  width: 170px;
  z-index: 1000;
  padding: 4px 0;
  display: none;
}

.template-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  transition: background 0.12s;
}

.template-menu-item:hover {
  background: #f8fafc;
  color: #2563eb;
}

.template-menu-item.danger:hover {
  background: #fef2f2;
  color: #ef4444;
}

/* Pagination Bar (Exact Match to Screenshot) */
.templates-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  margin-top: 20px;
  border-top: 1px solid #f1f5f9;
  flex-wrap: wrap;
  gap: 16px;
}

.templates-per-page-select-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #64748b;
}

.templates-per-page-select {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 13px;
  color: #1e293b;
  background: #ffffff;
  cursor: pointer;
  outline: none;
}

.templates-pagination-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.templates-pagination-summary {
  font-size: 13px;
  color: #64748b;
}

.templates-pagination-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-page-step {
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-page-step:hover:not(.disabled) {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.btn-page-step.active {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}

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

/* ==========================================================================
   TIMESHEET WORKSPACE (timesheet.php - Full Admin & User Integration)
   ========================================================================== */
.timesheet-page-wrap {
  padding: 24px 36px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
}

.timesheet-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 16px;
}

.timesheet-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.timesheet-page-title {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.timesheet-view-toggle {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 30px;
  border: 1px solid #e2e8f0;
}

.btn-ts-view {
  background: transparent;
  border: none;
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-ts-view.active {
  background: #ffffff;
  color: #2563eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.timesheet-subnav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 14px;
}

.timesheet-tabs-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ts-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s;
}

.ts-tab-btn.active {
  background: #eff6ff;
  color: #2563eb;
  border-color: #bfdbfe;
}

.timesheet-controls-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ts-select-pill {
  border: 1px solid #bfdbfe;
  background: #ffffff;
  color: #2563eb;
  font-weight: 700;
  font-size: 12.5px;
  border-radius: 20px;
  padding: 6px 14px;
  outline: none;
  cursor: pointer;
}

.ts-date-input {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  outline: none;
}

.ts-week-navigator {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 4px 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.btn-ts-step {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: 4px;
  transition: color 0.15s;
}

.btn-ts-step:hover {
  color: #0f172a;
}

.ts-period-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #0f172a;
  margin: 0 6px;
}

.ts-day-section {
  margin-bottom: 18px;
}

.ts-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ts-day-badge {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
}

.ts-day-badge.today {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #2563eb;
}

.ts-day-total {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
}

.ts-input-row {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 30px;
  padding: 4px 8px 4px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: border-color 0.15s, box-shadow 0.15s;
  margin-top: 6px;
}

.ts-input-row:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.ts-input-name {
  border: none;
  outline: none;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  width: 160px;
  background: transparent;
}

.ts-input-desc {
  border: none;
  outline: none;
  font-size: 13px;
  color: #475569;
  flex: 1;
  background: transparent;
}

.ts-v-div {
  width: 1px;
  height: 18px;
  background: #e2e8f0;
}

.ts-input-bottom-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ts-actions-slot {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-ts-mini-icon {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition: all 0.15s;
}

.btn-ts-mini-icon:hover {
  color: #2563eb;
  background: #f1f5f9;
}

.btn-ts-mini-icon.danger:hover {
  color: #ef4444;
  background: #fef2f2;
}

.ts-time-slot {
  display: flex;
  align-items: center;
  gap: 6px;
  border-left: 1px solid #f1f5f9;
  padding-left: 8px;
}

.ts-time-select {
  border: none;
  outline: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
}

.ts-hours-slot {
  border-left: 1px solid #f1f5f9;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  min-width: 65px;
  text-align: center;
}

.btn-ts-submit-row {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #eff6ff;
  color: #2563eb;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-ts-submit-row:hover {
  background: #2563eb;
  color: #ffffff;
}

.btn-ts-cancel-row {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #64748b;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 4px;
}

.ts-task-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #2563eb;
  border-radius: 30px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: all 0.15s;
}

.ts-task-card:hover {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

.ts-task-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.ts-task-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ts-task-desc {
  font-size: 13px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ts-task-meta-row {
  display: flex;
  align-items: center;
}

.ts-task-mid {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 16px;
}

.ts-time-range-display {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}

.ts-task-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ts-task-hours-badge {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 2px 8px;
}

.timesheet-weekly-summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.ts-total-highlight {
  color: #2563eb;
  font-size: 15px;
}

.timesheet-history-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.ts-history-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}

.ts-history-table th {
  background: #f8fafc;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  border-bottom: 1px solid #e2e8f0;
}

.ts-history-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

/* ==========================================================================
   FLOWCHART (flowchart.php - Dynamic Organizational Hierarchy)
   ========================================================================== */
.flowchart-page-wrap {
  padding: 24px 36px;
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
}

.flowchart-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 16px;
}

.flowchart-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.flowchart-page-title {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.flowchart-page-subtitle {
  font-size: 12.5px;
  color: #64748b;
  margin: 2px 0 0 0;
}

.btn-fc-action {
  border: 1px solid #93c5fd;
  color: #1e293b;
  background: #ffffff;
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-fc-action:hover {
  background: #eff6ff;
  border-color: #3b82f6;
}

.flowchart-canvas-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 36px 20px;
  overflow-x: auto;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
  min-height: 650px;
}

.fc-org-chart-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 900px;
}

.fc-root-node {
  position: relative;
  z-index: 2;
}

.fc-company-card {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  border-radius: 12px;
  padding: 16px 28px;
  text-align: center;
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.25);
  min-width: 220px;
}

.fc-company-icon {
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  color: #ffffff;
}

.fc-company-name {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.fc-company-label {
  margin: 2px 0 0;
  font-size: 11.5px;
  opacity: 0.85;
}

.fc-categories-row {
  position: relative;
  padding-top: 24px;
  width: 100%;
}

.fc-categories-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 24px;
  background: #cbd5e1;
}

.fc-categories-container {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  position: relative;
  padding-top: 16px;
  width: 100%;
}

.fc-category-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 170px;
  padding: 0 4px;
}

.fc-category-col::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #cbd5e1;
}

.fc-category-col::after {
  content: '';
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 16px;
  background: #cbd5e1;
}

.fc-dept-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 14px;
  text-align: center;
  width: 100%;
  max-width: 190px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.fc-dept-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 2px;
}

.fc-dept-title {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-dept-pill {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  background: #ffffff;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid #f1f5f9;
  display: inline-block;
}

.fc-v-line {
  width: 2px;
  height: 14px;
  background: #cbd5e1;
}

.fc-member-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 190px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: 4px;
}

.fc-member-card:hover {
  border-color: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.08);
}

.fc-avatar-box {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fc-member-info {
  flex: 1;
  min-width: 0;
}

.fc-member-name {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-member-role {
  margin: 0;
  font-size: 10.5px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-arrow-icon {
  font-size: 14px;
  color: #94a3b8;
}

.fc-children-tree {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  gap: 4px;
}

.fc-dept-projects-deck {
  border: 1px solid #e2e8f0;
  border-top: 3px solid #2563eb;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px;
  width: 100%;
  max-width: 190px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.fc-deck-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
  color: #475569;
  padding-bottom: 6px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 8px;
}

.fc-deck-count {
  background: #eff6ff;
  color: #2563eb;
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 9px;
}

.fc-deck-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 120px;
  overflow-y: auto;
}

.fc-proj-mini-card {
  display: block;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 6px;
  padding: 6px 8px;
  text-decoration: none;
  color: inherit;
  transition: all 0.12s;
}

.fc-proj-mini-card:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.fc-proj-mini-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 4px;
}

.fc-proj-mini-title {
  font-size: 10.5px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 95px;
}

.fc-proj-mini-status {
  font-size: 9px;
  font-weight: 600;
  color: #2563eb;
}

.fc-proj-progress-bar {
  height: 3px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.fc-proj-progress-fill {
  height: 100%;
  background: #2563eb;
  border-radius: 4px;
}

.fc-modal-task-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
}

/* ==========================================================================
   NOTIFICATIONS POPOVER (Exact Match to Screenshot 1)
   ========================================================================== */
.header-popover,
.notif-popover-panel {
  position: fixed !important;
  top: 54px !important;
  right: 20px !important;
  width: 380px !important;
  max-width: 90vw !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid #e2e8f0 !important;
  overflow: hidden !important;
  z-index: 99999 !important;
  display: none;
  animation: slidePopover 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.notif-popover-header {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
}

.notif-popover-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.btn-notif-mark-all {
  border: 1px solid #93c5fd;
  color: #1e293b;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-notif-mark-all:hover {
  background: #eff6ff;
  border-color: #3b82f6;
}

.notif-popover-item {
  padding: 14px 18px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  transition: background 0.15s;
}

.notif-popover-item.unread {
  background: #f8fafc;
}

.notif-popover-item:hover {
  background: #f1f5f9;
}

.notif-item-left {
  flex: 1;
  min-width: 0;
}

.notif-item-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
  margin-bottom: 4px;
}

.notif-item-desc {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.4;
  margin-bottom: 6px;
}

.notif-item-time {
  font-size: 11.5px;
  color: #94a3b8;
}

.btn-notif-item-read {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #334155;
  background: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.12s;
}

.btn-notif-item-read:hover {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #2563eb;
}

.notif-popover-footer {
  padding: 12px 18px;
  border-top: 1px solid #f1f5f9;
  background: #ffffff;
}

.btn-notif-view-all {
  width: 100%;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  padding: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: #1e293b;
  text-align: center;
  display: block;
  text-decoration: none;
  cursor: pointer;
  background: #ffffff;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.btn-notif-view-all:hover {
  background: #f8fafc;
  border-color: #818cf8;
}

/* ==========================================================================
   NOTIFICATIONS FULL PAGE (notifications.php - Exact Match to Screenshot 2)
   ========================================================================== */
.notifications-page-container {
  padding: 24px 36px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
}

.notif-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.notif-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.notif-accent-bar {
  width: 3px;
  height: 20px;
  background: #2563eb;
  border-radius: 2px;
}

.notif-page-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.notif-unread-badge-pill {
  background: #eff6ff;
  color: #2563eb;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
}

.notif-header-center {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.notif-tabs-group {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 14px;
  gap: 2px;
}

.notif-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}

.notif-tab-btn.active {
  background: #dbeafe;
  color: #1e3a8a;
  font-weight: 600;
}

.notif-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 12px;
  background: #ffffff;
  width: 220px;
}

.notif-search-box input {
  border: none;
  outline: none;
  font-size: 13px;
  width: 100%;
  color: #0f172a;
}

.notif-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-notif-page-mark-all {
  border: 1px solid #93c5fd;
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  background: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}

.btn-notif-page-mark-all:hover {
  background: #eff6ff;
  border-color: #3b82f6;
}

.notif-select-all-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 16px;
}

.notif-select-all-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
}

.notif-select-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  cursor: pointer;
  accent-color: #2563eb;
}

.notif-cards-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notif-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  position: relative;
  transition: all 0.15s ease;
}

.notif-card.unread {
  border: 1.5px solid #3b82f6;
  background: #fbfdff;
}

.notif-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.notif-card-icon-wrap {
  width: 36px;
  height: 36px;
  background: #ffedd5;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ea580c;
  position: relative;
  flex-shrink: 0;
}

.notif-unread-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  background: #2563eb;
  border: 1.5px solid #ffffff;
  border-radius: 50%;
}

.notif-card-content {
  flex: 1;
  min-width: 0;
}

.notif-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 4px;
}

.notif-card-desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
  margin-bottom: 8px;
}

.notif-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #94a3b8;
}

.notif-type-tag {
  background: #f1f5f9;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.notif-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.8;
  transition: opacity 0.15s;
}

.notif-card:hover .notif-card-actions {
  opacity: 1;
}

.btn-notif-action-icon {
  background: none;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
  transition: all 0.12s;
}

.btn-notif-action-icon:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

.btn-notif-action-icon.delete:hover {
  color: #ef4444;
  border-color: #fca5a5;
  background: #fef2f2;
}

/* Notification Types & Badges */
.notif-type-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notif-approval-btn-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 8px 0;
}

.btn-notif-approve {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #10b981;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-notif-approve:hover {
  background: #059669;
  transform: translateY(-1px);
}

.btn-notif-reject {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ffffff;
  color: #ef4444;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-notif-reject:hover {
  background: #fef2f2;
  border-color: #ef4444;
}

/* Task Approval Pill & Quick Buttons */
.task-approval-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.task-approval-pill.pending {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.task-approval-pill.rejected {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.btn-approval-quick {
  border: none;
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
}

.btn-approval-quick.approve {
  background: #10b981;
  color: #ffffff;
}

.btn-approval-quick.approve:hover {
  background: #059669;
}

.btn-approval-quick.reject {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.btn-approval-quick.reject:hover {
  background: #fee2e2;
}

/* Bell ring micro-animation */
@keyframes bellRing {
  0% { transform: rotate(0); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-12deg); }
  45% { transform: rotate(10deg); }
  60% { transform: rotate(-8deg); }
  75% { transform: rotate(4deg); }
  100% { transform: rotate(0); }
}

.bell-ring-animation .material-symbols-rounded {
  animation: bellRing 0.8s ease;
  color: #2563eb !important;
}

.tc-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.tc-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: .2s;
  border-radius: 22px;
}

.tc-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .2s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.tc-switch input:checked + .tc-slider {
  background-color: #2563eb;
}

.tc-switch input:checked + .tc-slider:before {
  transform: translateX(16px);
}

/* Planning Data Table */
.planning-table-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-x: auto;
}

.planning-data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.planning-data-table thead tr {
  border-bottom: 1px solid #eef2f6;
  background: #ffffff;
}

.planning-data-table th {
  padding: 12px 18px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.plan-group-row td {
  padding: 10px 18px;
  background: #ffffff;
  border-bottom: 1px solid #f1f5f9;
}

.group-row-inner {
  display: flex;
  align-items: center;
  gap: 6px;
}

.group-chevron {
  font-size: 18px;
  color: #64748b;
}

.group-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
}

.plan-task-row {
  border-bottom: 1px solid #f8fafc;
  transition: background 0.15s;
}

.plan-task-row:hover {
  background: #f8fafc;
}

.plan-task-row td {
  padding: 10px 18px;
  font-size: 12.5px;
  vertical-align: middle;
}

.cell-plan-name {
  min-width: 300px;
}

.task-name-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.task-exp-chevron {
  font-size: 16px;
  color: #64748b;
  cursor: pointer;
}

.task-bullet {
  color: #94a3b8;
  font-size: 14px;
}

.task-name-text {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
}

.subtask-fork-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1.5px 6px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 8px;
  margin-left: 6px;
}

.cell-plan-date {
  color: #64748b;
  white-space: nowrap;
}

.cell-plan-date.text-muted-btn {
  color: #94a3b8;
  cursor: pointer;
}

.cell-plan-date.text-muted-btn:hover {
  color: #1d72f2;
}

.cell-plan-dep {
  color: #cbd5e1;
}

.cell-plan-flag {
  color: #2563eb;
}

.flag-icon {
  font-size: 16px;
  color: #2563eb;
  font-variation-settings: 'FILL' 0, 'wght' 400;
}

.badge-plan-new {
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  padding: 2.5px 8px;
  border-radius: 6px;
}

/* Subtask Row */
.plan-subtask-row td {
  padding: 8px 18px;
  font-size: 12.5px;
  background: #fafafa;
  border-bottom: 1px solid #f1f5f9;
}

.sub-indent {
  padding-left: 48px !important;
}

.sub-branch-icon {
  color: #cbd5e1;
  font-size: 13px;
}

/* Add Task Footer Row - Fixed at bottom */
.plan-add-task-footer {
  margin-top: auto;
  padding: 12px 24px;
  border-top: 1px solid #f1f5f9;
  background: #ffffff;
  display: flex;
  align-items: center;
}

.btn-plan-add-task {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s;
}

.btn-plan-add-task:hover {
  color: #1d72f2;
}

/* Centered Empty State for Planning Page (Exact Replica of Screenshot) */
.plan-empty-center-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 80px 24px 40px 24px;
  text-align: center;
}

.plan-empty-state-art {
  margin-bottom: 18px;
}

.skel-bars-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.skel-bar {
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
}

.skel-bar.bar-long {
  width: 46px;
}

.skel-bar.bar-med {
  width: 32px;
}

.skel-bar.bar-short {
  width: 22px;
}

.plan-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px 0;
}

.plan-empty-desc {
  font-size: 13px;
  color: #64748b;
  margin: 0 0 20px 0;
}

.btn-plan-add-task-blue {
  background: #1d72f2;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-plan-add-task-blue:hover {
  background: #1557bf;
}

/* ==========================================================================
   INLINE TASK CREATOR ROW (Exact Match to User Screenshot)
   ========================================================================== */
.plan-inline-task-wrap {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.plan-inline-task-form {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 480px;
  width: 100%;
  justify-content: center;
}

.plan-inline-task-input {
  width: 320px;
  height: 38px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 13px;
  color: #0f172a;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.plan-inline-task-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.plan-inline-task-input::placeholder {
  color: #94a3b8;
}

.btn-plan-inline-create {
  height: 38px;
  padding: 0 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  background: #2563eb;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.btn-plan-inline-create:hover:not(:disabled) {
  background: #1d4ed8;
}

.btn-plan-inline-create:disabled,
.btn-plan-inline-create.disabled {
  background: #bfdbfe;
  color: #60a5fa;
  cursor: not-allowed;
}

/* Tree sub-item styles */
.tree-sub-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  font-size: 12.5px;
  color: #64748b;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
}

.tree-sub-item:hover {
  background: #f8fafc;
  color: #0f172a;
}

.tree-sub-item.active {
  color: #1d72f2;
  font-weight: 600;
  background: #eff6ff;
}

.tree-board-bullet {
  color: #94a3b8;
  font-size: 14px;
}

/* ==========================================================================
   5. MY WORK PAGE (mywork.php)
   ========================================================================== */
.mywork-main {
  padding: 0 32px 32px 32px;
  flex: 1;
}

.mywork-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 16px 0;
  margin-bottom: 16px;
  position: sticky;
  top: 56px;
  background: var(--bg-app);
  z-index: 80;
}

.mywork-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mywork-title-group h1 {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
}

.item-count-badge {
  font-size: 12px;
  color: #64748b;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.mywork-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Custom Projects Dropdown in My Work (Exact Match to Screenshot) */
.mywork-dropdown-container {
  position: relative;
}

.proj-filter-pill {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.mywork-dropdown-container.open .proj-filter-pill {
  border-color: #1d72f2;
  box-shadow: 0 0 0 2px rgba(29, 114, 242, 0.15);
}

.proj-folder-icon {
  font-size: 16px;
  color: #2563eb;
  font-variation-settings: 'FILL' 0, 'wght' 400;
}

.dropdown-arrow {
  font-size: 16px;
  color: #64748b;
  transition: transform 0.15s;
}

.mywork-custom-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 220px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.02);
  padding: 8px;
  z-index: 100;
  display: none;
  animation: dropdownFadeIn 0.15s ease;
}

.mywork-dropdown-container.open .mywork-custom-dropdown {
  display: block;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-search-box {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 5px 8px;
  margin-bottom: 6px;
  background: #ffffff;
}

.dropdown-search-box .search-icon {
  font-size: 15px;
  color: #94a3b8;
}

.dropdown-search-box input {
  border: none;
  background: none;
  outline: none;
  font-size: 12.5px;
  font-family: inherit;
  color: #0f172a;
  width: 100%;
}

.dropdown-items-list {
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.dropdown-items-list::-webkit-scrollbar {
  display: block;
  width: 4px;
}

.dropdown-items-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.dropdown-item {
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.dropdown-item.active {
  background: #eff6ff;
  color: #0f172a;
  font-weight: 700;
}

.control-pill {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.date-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 190px;
  min-width: 190px;
  max-width: 190px;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 4px 6px;
  font-size: 13px;
  color: #334155;
  flex-shrink: 0;
}

.btn-date-nav {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
  transition: all 0.15s;
}

.btn-date-nav:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.btn-date-nav span {
  font-size: 16px;
}

.date-pill-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  font-weight: 500;
  color: #1e293b;
  user-select: none;
  white-space: nowrap;
}

#currentMonthYearDisplay {
  white-space: nowrap;
  text-align: center;
}

.date-cal-icon {
  font-size: 15px;
  color: #64748b;
  flex-shrink: 0;
  font-variation-settings: 'FILL' 0, 'wght' 400;
}

.date-pill-wrap {
  position: relative;
}

.month-selector-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  width: 220px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  padding: 10px;
  z-index: 1000;
  display: none;
}

.month-selector-dropdown.open {
  display: block;
}

.month-grid-12 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.month-opt-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 4px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  text-align: center;
  transition: all 0.12s ease;
}

.month-opt-btn:hover {
  background: #f1f5f9;
  color: #1d72f2;
}

.month-opt-btn.active {
  background: #1d72f2;
  color: #ffffff;
}

.search-work-input {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: 6px 12px 6px 32px;
  font-size: 13px;
  width: 220px;
  outline: none;
}

.mywork-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
}

.mywork-left-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.me-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.me-card-header-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.me-collapse-chevron {
  display: none;
}

.me-card-body {
  display: block;
}

.me-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 12px;
}

.me-user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.me-avatar-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1d72f2;
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.me-info .name {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.role-badge-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #1d72f2;
  background: #e0edff;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 2px;
}

.team-member-select {
  margin-top: 14px;
}

.team-member-select label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #9ca3af;
  display: block;
  margin-bottom: 6px;
}

.team-member-select select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  font-size: 13px;
  background: #ffffff;
  color: #111827;
  outline: none;
}

.filter-section {
  margin-top: 16px;
}

.filter-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 8px;
}

.filter-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  color: #4b5563;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 2px;
  cursor: pointer;
  transition: all 0.15s;
}

.filter-item:hover {
  background: #f1f5f9;
  color: #111827;
}

.filter-item.active {
  background: #e0edff;
  color: #1d72f2;
  font-weight: 600;
}

.filter-count {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}

.filter-item.active .filter-count {
  color: #1d72f2;
}

.mywork-right-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.work-section-box {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.work-section-header {
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #475569;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.12s ease;
}

.work-section-header:hover {
  background-color: #fafbfc;
}

.work-section-box.collapsed .work-section-body {
  display: none !important;
}

.work-section-box.collapsed .work-section-header {
  border-bottom: none;
}

.empty-state-wrap {
  padding: 36px 20px;
  text-align: center;
}

.empty-icon-box {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px auto;
  color: #94a3b8;
}

.empty-title {
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 4px;
}

.empty-desc {
  font-size: 12px;
  color: #94a3b8;
}

.projects-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.projects-table th {
  text-align: left;
  padding: 10px 18px;
  color: #64748b;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  border-bottom: 1px solid #f1f5f9;
  background: #fafbfc;
}

.projects-table td {
  padding: 14px 18px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
}

.projects-table tr:hover td {
  background: #f8fafc;
}

.project-title-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.star-btn {
  color: #cbd5e1;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  transition: transform 0.12s ease, color 0.12s ease;
}

.star-btn:hover {
  color: #f59e0b;
  transform: scale(1.15);
}

.star-btn.active {
  color: #f59e0b;
}

.folder-icon {
  color: #10b981;
  font-size: 18px;
}

.project-name-bold {
  font-weight: 600;
  color: #0f172a;
}

.project-owner-sub {
  font-size: 11px;
  color: #94a3b8;
}

.status-badge-blue {
  color: #1d72f2;
  font-weight: 600;
  font-size: 12px;
}

.progress-track {
  width: 80px;
  height: 6px;
  background: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}

.progress-track-fill {
  height: 100%;
  background: #1d72f2;
}

.table-pagination {
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #64748b;
  border-top: 1px solid #f1f5f9;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.page-num-btn {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
}

.page-num-btn.active {
  background: #1d72f2;
  color: #ffffff;
  border-color: #1d72f2;
}

/* Modals & Slide-Over Drawers */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-backdrop.open {
  display: flex;
}

.modal-dialog {
  background: #ffffff;
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 480px;
  padding: 28px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.modal-title {
  font-size: 18px;
  font-weight: 700;
}

.modal-close {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  font-size: 20px;
}

/* ==========================================================================
   SLIDE-OVER DRAWER: CREATE PROJECT (Exact Replica of Screenshot)
   ========================================================================== */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  z-index: 9990;
  display: none;
}

.drawer-backdrop.open,
.drawer-backdrop.active {
  display: block;
}

.drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 740px;
  max-width: 95vw;
  height: 100vh;
  background: #ffffff;
  z-index: 9995;
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
  animation: slideDrawerIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideDrawerIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.drawer-header {
  padding: 20px 24px 16px 24px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: #ffffff;
}

.drawer-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.drawer-subtitle {
  font-size: 13px;
  color: #64748b;
  margin: 4px 0 0 0;
}

.drawer-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-drawer-templates {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #1e293b;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-drawer-templates:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.btn-drawer-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
  transition: all 0.15s;
}

.btn-drawer-close:hover {
  background: #f8fafc;
  color: #0f172a;
}

.drawer-form-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.drawer-scroll-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  background: #ffffff;
}

.drawer-card-section {
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.drawer-card-section.collapsed-sec {
  padding: 14px 20px;
}

.section-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.drawer-card-section.collapsed-sec .section-card-header {
  margin-bottom: 0;
}

.section-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.section-chevron {
  color: #94a3b8;
  font-size: 20px;
}

.drawer-form-row {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
}

.drawer-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.drawer-form-row .drawer-form-field {
  margin-bottom: 0;
}

.drawer-form-field.flex-1 {
  flex: 1;
}

.drawer-form-field.flex-2 {
  flex: 2;
}

.drawer-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
}

.required-star {
  color: #ef4444;
  margin-left: 2px;
}

.drawer-input,
.drawer-select {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  color: #0f172a;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.drawer-input:focus,
.drawer-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ==========================================================================
   DRAWER ADVANCED OPTIONS GRID (Exact Replica of Screenshot)
   ========================================================================== */
.drawer-adv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
  width: 100%;
  box-sizing: border-box;
}

.drawer-adv-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  background: #ffffff;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  min-width: 0;
  box-sizing: border-box;
}

.drawer-adv-card:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.drawer-adv-card.active {
  border-color: #3b82f6;
  background: #f8faff;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}

.drawer-adv-plus-box {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #334155;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.drawer-adv-card.active .drawer-adv-plus-box {
  background: #dbeafe;
  color: #2563eb;
}

.drawer-adv-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.drawer-adv-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawer-adv-desc {
  font-size: 11.5px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

  border-color: #1d72f2;
}

.drawer-date-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.drawer-date-input-wrap .date-picker-icon {
  position: absolute;
  right: 10px;
  font-size: 16px;
  color: #64748b;
  pointer-events: none;
}

.btn-drawer-add-member {
  background: #1d72f2;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-drawer-add-member:hover {
  background: #1557bf;
}

.drawer-empty-members-box {
  border: 1px dashed #e2e8f0;
  border-radius: 8px;
  padding: 24px 16px;
  text-align: center;
  color: #94a3b8;
  font-size: 12.5px;
  background: #ffffff;
}

.drawer-footer {
  padding: 14px 24px;
  border-top: 1px solid #eef2f6;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.drawer-warning-msg {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #d97706;
  font-size: 12.5px;
  font-weight: 500;
}

.btn-drawer-cancel {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  padding: 8px 16px;
  cursor: pointer;
  margin-right: 8px;
  border-radius: 6px;
  transition: background 0.15s;
}

.btn-drawer-cancel:hover {
  background: #f1f5f9;
}

.btn-drawer-submit {
  background: #1d72f2;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-drawer-submit:hover:not(.disabled) {
  background: #1557bf;
}

.btn-drawer-submit.disabled,
.btn-drawer-submit:disabled {
  background: #cbd5e1;
  color: #ffffff;
  cursor: not-allowed;
}

/* ==========================================================================
   SIGN IN PAGE (Left Showcase + Right Sign In Form)
   ========================================================================== */
.signin-page-container {
  display: flex;
  min-height: 100vh;
  width: 100vw;
  background: #ffffff;
}

/* Left: Showcase Column */
.signin-showcase-col {
  flex: 1.2;
  background: #f8fafc;
  border-right: 1px solid #eef2f6;
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.showcase-header {
  margin-bottom: 32px;
}

.timechamp-logo-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.tc-icon-hex {
  width: 34px;
  height: 34px;
  background: #1d72f2;
  color: #ffffff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tc-icon-hex .material-symbols-rounded {
  font-size: 20px;
}

.tc-logo-text {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #0f172a;
}

.showcase-title {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px 0;
}

.showcase-subtitle {
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.5;
  max-width: 520px;
  margin: 0;
}

.showcase-mockup-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.mock-card {
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.mock-card-title {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
}

.mock-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.mock-avatar-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #334155;
}

.mock-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #3b82f6;
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Right: Sign In Form Column */
.signin-form-col {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: #ffffff;
}

.signin-card {
  width: 100%;
  max-width: 380px;
}

.signin-title {
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
  text-align: center;
  margin: 0 0 28px 0;
}

.form-field {
  margin-bottom: 18px;
}

.form-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}

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

.form-input-wrap input {
  width: 100%;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-family: inherit;
  color: #0f172a;
  outline: none;
  box-sizing: border-box;
  transition: all 0.15s;
}

.form-input-wrap input:focus {
  border-color: #1d72f2;
  box-shadow: 0 0 0 3px rgba(29, 114, 242, 0.12);
}

.toggle-password-btn {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
}

.toggle-password-btn:hover {
  color: #334155;
}

.signin-options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
}

.checkbox-label input {
  accent-color: #1d72f2;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.forgot-link {
  font-size: 13px;
  font-weight: 600;
  color: #1d72f2;
  text-decoration: none;
}

.forgot-link:hover {
  text-decoration: underline;
}

.btn-signin {
  width: 100%;
  background: #1d72f2;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-signin:hover {
  background: #1557bf;
}

/* ==========================================================================
   EXACT PROFILE SETTINGS PAGE (Matching User Screenshot)
   ========================================================================== */
.ps-page-wrapper {
  padding: 24px 32px 48px 32px;
  width: 100%;
}

.ps-top-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}

.ps-header-left h1 {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.ps-header-left p {
  font-size: 13.5px;
  color: #6b7280;
}

.btn-back-dash {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  text-decoration: none;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.btn-back-dash:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #111827;
}

.ps-layout-grid {
  display: grid;
  grid-template-columns: minmax(540px, 1fr) 280px;
  gap: 24px;
  align-items: start;
}

.ps-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px 28px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.ps-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 20px;
}

/* Avatar Photo Row */
.ps-avatar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.ps-avatar-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #4338ca;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.ps-photo-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.btn-change-photo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s ease;
  width: fit-content;
}

.btn-change-photo:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.ps-photo-hint {
  font-size: 11.5px;
  color: #9ca3af;
}

/* Form Fields */
.ps-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}

.ps-form-group {
  margin-bottom: 18px;
}

.ps-form-group.no-mb {
  margin-bottom: 0;
}

.ps-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.ps-label .req {
  color: #ef4444;
}

.ps-input {
  width: 100%;
  padding: 9px 13px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  color: #111827;
  outline: none;
  background: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ps-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.ps-input::placeholder {
  color: #9ca3af;
}

.ps-select-wrap {
  position: relative;
}

.ps-select {
  width: 100%;
  padding: 9px 36px 9px 13px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  color: #111827;
  outline: none;
  background: #ffffff;
  appearance: none;
  cursor: pointer;
}

.ps-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.ps-select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #4b5563;
  font-size: 18px;
}

.ps-helper-text {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 6px;
  line-height: 1.4;
}

/* Form Action Buttons */
.ps-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 28px;
}

.btn-ps-cancel {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-ps-cancel:hover {
  background: #f9fafb;
}

.btn-ps-save {
  background: #2563eb;
  border: 1px solid #2563eb;
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 13.5px;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-ps-save:hover {
  background: #1d4ed8;
}

/* Right Card: Account Information */
.ps-account-card {
  padding: 24px 24px;
}

.ps-meta-item {
  margin-bottom: 20px;
}

.ps-meta-item:last-child {
  margin-bottom: 0;
}

.ps-meta-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #6b7280;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.ps-meta-value {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.ps-status-badge {
  display: inline-block;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #059669;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 9px;
  border-radius: 9999px;
}

/* ==========================================================================
   ADMINISTRATION PAGE STYLES (Matching User Screenshot)
   ========================================================================== */
.admin-page-container {
  padding: 20px 32px 48px 32px;
  width: 100%;
}

/* Top Tabs Bar */
.admin-top-tabs-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.admin-tab-btn {
  padding: 6px 16px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: #111827;
  transition: all 0.15s ease;
}

.admin-tab-btn:hover {
  background: #f1f5f9;
}

.admin-tab-btn.active {
  background: #2563eb;
  color: #ffffff;
}

/* Search and Filter Row */
.admin-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.admin-filters-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-search-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 260px;
}

.admin-search-box input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: #111827;
  background: #ffffff;
  outline: none;
  transition: border-color 0.15s ease;
}

.admin-search-box input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.admin-search-icon {
  position: absolute;
  left: 10px;
  font-size: 16px;
  color: #9ca3af;
  pointer-events: none;
}

.admin-status-select {
  padding: 8px 32px 8px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: #374151;
  background: #ffffff;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' 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 10px center;
}

.btn-add-user-blue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #2563eb;
  color: #ffffff;
  border: 1px solid #2563eb;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-add-user-blue:hover {
  background: #1d4ed8;
}

/* Users Table Card */
.admin-table-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.admin-table-scroll-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #ffffff;
  border-top: 1px solid #f1f5f9;
  font-size: 12.5px;
  color: #64748b;
  width: 100%;
  box-sizing: border-box;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  white-space: nowrap;
}

.admin-table th {
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  background: #ffffff;
  border-bottom: 1px solid #f1f5f9;
  white-space: nowrap;
  vertical-align: middle;
}

.admin-table td {
  padding: 13px 18px;
  font-size: 13px;
  color: #1f2937;
  border-bottom: 1px solid #f8fafc;
  white-space: nowrap;
  vertical-align: middle;
}

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

.admin-table tr:hover td {
  background: #fcfdfe;
}

.admin-action-btn {
  background: none;
  border: none;
  color: #4b5563;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.admin-action-btn:hover {
  color: #111827;
  background: #f1f5f9;
}

/* ==========================================================================
   PROJECTS LIST VIEW TABLE STYLES
   ========================================================================== */
.projects-list-view-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  margin-bottom: 24px;
  width: 100%;
}

.projects-table-scroll-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.projects-list-pagination,
.projects-grid-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: #ffffff;
  border-top: 1px solid #f1f5f9;
  font-size: 12.5px;
  color: #64748b;
  width: 100%;
  box-sizing: border-box;
}

.projects-grid-pagination {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-top: 14px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

.projects-list-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  table-layout: auto;
}

.projects-list-table th {
  padding: 10px 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}

.projects-list-table td {
  padding: 9px 8px;
  font-size: 12px;
  color: #1e293b;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  background: #ffffff;
  transition: background 0.15s ease;
}

.projects-list-table tr:last-child td {
  border-bottom: none;
}

.projects-list-table tr:hover td {
  background: #f8fafc;
}

.projects-list-table .proj-members-popover {
  right: 0;
  left: auto;
}

.projects-list-table .proj-members-popover::after {
  left: auto;
  right: 22px;
}

.proj-table-name-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.proj-table-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #dbeafe;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.proj-table-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  text-decoration: none;
  display: block;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.proj-table-desc {
  font-size: 11px;
  color: #64748b;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.proj-table-title:hover {
  color: #2563eb;
}

.proj-code-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   FLOATING MEMBER PICKER POPOVER (Matching User Screenshot)
   ========================================================================== */
.member-picker-popover-wrap {
  position: relative;
}

.member-picker-popover {
  position: absolute;
  top: -160px;
  right: 0;
  width: 360px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 4px 6px rgba(0, 0, 0, 0.04);
  z-index: 1100;
  overflow: hidden;
  display: none;
  animation: popoverFadeIn 0.18s ease-out;
}

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

.mpp-search-header {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  position: relative;
  display: flex;
  align-items: center;
}

.mpp-search-icon {
  position: absolute;
  left: 22px;
  font-size: 16px;
  color: #94a3b8;
  pointer-events: none;
}

.mpp-search-input {
  width: 100%;
  padding: 8px 12px 8px 32px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: #111827;
  outline: none;
  background: #ffffff;
  transition: border-color 0.15s ease;
}

.mpp-search-input:focus {
  border-color: #2563eb;
}

.mpp-search-input::placeholder {
  color: #94a3b8;
}

.mpp-select-all-row {
  display: flex;
  justify-content: flex-end;
  padding: 8px 16px 4px 16px;
}

.btn-mpp-select-all {
  background: none;
  border: none;
  font-size: 11px;
  font-weight: 700;
  color: #1e293b;
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.btn-mpp-select-all:hover {
  color: #2563eb;
}

.mpp-members-list {
  max-height: 230px;
  overflow-y: auto;
  padding: 4px 8px;
}

.mpp-member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.12s ease;
  user-select: none;
}

.mpp-member-row:hover {
  background: #f8fafc;
}

.mpp-checkbox {
  accent-color: #2563eb;
  width: 16px;
  height: 16px;
  cursor: pointer;
  border-radius: 4px;
}

.mpp-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mpp-user-info {
  flex: 1;
  min-width: 0;
}

.mpp-user-name {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mpp-user-email {
  font-size: 11.5px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mpp-actions-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid #f1f5f9;
  background: #ffffff;
}

.btn-mpp-cancel {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: all 0.12s ease;
}

.btn-mpp-cancel:hover {
  background: #f9fafb;
}

.btn-mpp-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
  transition: all 0.12s ease;
}

.btn-mpp-add:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

/* ==========================================================================
   BILLABLE BUDGET CONTROLS & DROPDOWNS
   ========================================================================== */
.budget-dropdown-wrap {
  position: relative;
}

.budget-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  min-width: 170px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  padding: 4px;
  z-index: 1000;
  display: none;
}

.budget-dropdown-menu.open {
  display: block;
}

.budget-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.12s ease;
  white-space: nowrap;
}

.budget-dropdown-item:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.budget-dropdown-item.active {
  background: #eff6ff;
  color: #2563eb;
  font-weight: 600;
}

/* ==========================================================================
   FINANCE HUB PAGE STYLES (Matching Screenshot 2)
   ========================================================================== */
.finance-main-wrap {
  padding: 24px 32px;
  max-width: 1440px;
  margin: 0 auto;
}

.fin-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.fin-title-group {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.fin-title-indicator {
  width: 4px;
  height: 24px;
  background: #2563eb;
  border-radius: 2px;
  margin-top: 2px;
}

.fin-title-wrap h1 {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
}

.fin-subtitle {
  font-size: 13px;
  color: #64748b;
  margin-top: 4px;
}

.fin-reporting-info {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

.fin-nav-tabs {
  display: flex;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 20px;
}

.fin-tab-btn {
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  padding: 10px 0;
  cursor: pointer;
  position: relative;
  transition: color 0.15s ease;
}

.fin-tab-btn:hover {
  color: #0f172a;
}

.fin-tab-btn.active {
  color: #2563eb;
}

.fin-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2.5px;
  background: #2563eb;
  border-radius: 2px 2px 0 0;
}

.fin-period-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.fin-period-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fin-period-select {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
  outline: none;
  cursor: pointer;
}

.fin-alert-banner {
  background: #ffffff;
  border: 1px solid #e0edff;
  border-radius: 10px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.fin-alert-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: #1e293b;
  font-weight: 500;
}

.fin-alert-star-icon {
  color: #2563eb;
  font-size: 16px;
}

.btn-open-ready-bill {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-open-ready-bill:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.fin-metrics-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr) 1.2fr;
  gap: 14px;
  margin-bottom: 20px;
}

.fin-card {
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 115px;
}

.fin-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fin-card-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fin-dot-green {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
}

.fin-dot-orange {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
}

.fin-card-val {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin: 6px 0 2px 0;
}

.fin-card-sub {
  font-size: 11.5px;
  color: #94a3b8;
}

.fin-secondary-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px;
}

/* ==========================================================================
   ADD NEW USER MODAL (Exact Replica of Screenshots 1, 2, 3)
   ========================================================================== */
.au-modal-dialog {
  max-width: 480px;
  width: 100%;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
}

.au-modal-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
}

.au-modal-title {
  font-size: 16.5px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.au-btn-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #475569;
  transition: all 0.15s ease;
}

.au-btn-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.au-modal-body {
  padding: 20px 24px;
  max-height: 65vh;
  overflow-y: auto;
}

.au-form-group {
  margin-bottom: 18px;
}

.au-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 6px;
}

.req-star {
  color: #ef4444;
  font-weight: 700;
  margin-left: 2px;
}

.au-sub-label {
  color: #64748b;
  font-weight: 500;
  font-size: 12px;
  margin-left: 4px;
}

.au-input,
.au-select,
.au-textarea,
.au-form-group textarea,
.au-modal-dialog textarea {
  width: 100% !important;
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  color: #0f172a;
  background: #ffffff;
  outline: none;
  box-sizing: border-box !important;
  display: block !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.au-textarea,
.au-form-group textarea,
.au-modal-dialog textarea {
  resize: vertical !important;
  min-height: 84px !important;
  line-height: 1.5;
}

.au-input:focus,
.au-select:focus,
.au-textarea:focus,
.au-form-group textarea:focus,
.au-modal-dialog textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.au-input::placeholder,
.au-textarea::placeholder,
.au-form-group textarea::placeholder,
.au-modal-dialog textarea::placeholder {
  color: #94a3b8;
}

.au-hint {
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.45;
  margin-top: 6px;
  margin-bottom: 0;
}

.au-adv-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  cursor: pointer;
  margin: 16px 0 18px 0;
  user-select: none;
}

.au-adv-icon {
  font-size: 9px;
  transition: transform 0.15s ease;
}

.au-modal-footer {
  padding: 14px 24px;
  border-top: 1px solid #f1f5f9;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.btn-au-cancel {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  transition: all 0.12s ease;
}

.btn-au-cancel:hover {
  background: #f8fafc;
}

.btn-au-submit {
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}

.btn-au-submit:hover {
  background: #1d4ed8;
}

.btn-au-submit.disabled {
  background: #bfdbfe !important;
  color: #ffffff !important;
  cursor: not-allowed;
}

/* ==========================================================================
   FEEDBACK CONTENT AREA (Exact Replica of Screenshot)
   ========================================================================== */
.feedback-main-container {
  padding: 24px 32px;
  background: #ffffff;
  min-height: calc(100vh - 64px);
}

.fb-header-block {
  margin-bottom: 20px;
}

.fb-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fb-accent-bar {
  width: 4px;
  height: 20px;
  background: #2563eb;
  border-radius: 2px;
  display: inline-block;
}

.fb-title {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.01em;
}

.fb-subtitle {
  font-size: 13px;
  color: #64748b;
  margin-top: 6px;
  margin-bottom: 0;
}

.fb-tabs-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 24px;
}

.fb-tab-item {
  background: transparent;
  border: none;
  font-size: 13.5px;
  font-weight: 500;
  color: #64748b;
  padding: 10px 0;
  cursor: pointer;
  position: relative;
  transition: color 0.15s ease;
  outline: none;
}

.fb-tab-item:hover {
  color: #0f172a;
}

.fb-tab-item.active {
  color: #0f172a;
  font-weight: 600;
}

.fb-tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #2563eb;
  border-radius: 2px 2px 0 0;
}

.fb-empty-card {
  border: 1px dashed #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  padding: 80px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 16px;
}

.fb-icon-box {
  width: 44px;
  height: 44px;
  background: #eff6ff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.fb-empty-title {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 8px 0;
}

.fb-empty-desc {
  font-size: 13px;
  color: #64748b;
  max-width: 420px;
  line-height: 1.5;
  margin: 0;
}

.fb-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.fb-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
}

.fb-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.fb-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.fb-author-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fb-author-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fb-author-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
}

.fb-meta-date {
  font-size: 11.5px;
  color: #94a3b8;
}

.fb-rating-stars {
  color: #f59e0b;
  font-size: 13.5px;
  letter-spacing: 2px;
}

.fb-card-subject {
  font-size: 14.5px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 6px 0;
}

.fb-card-msg {
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
  margin: 0 0 14px 0;
  flex: 1;
}

.fb-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
  font-size: 12px;
}

.fb-target-pill {
  background: #f1f5f9;
  color: #475569;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
}

/* Modal Backdrops & Dialogs System */
.modal-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99999 !important;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
}

.modal-backdrop.active,
.modal-backdrop[style*="display: flex"],
.modal-backdrop[style*="display: block"] {
  display: flex !important;
}

.nested-picker-modal,
#employeePickerModal {
  z-index: 99999999 !important;
}

.au-modal-dialog {
  background: #ffffff;
  border-radius: 12px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  margin: auto;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.au-modal-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
}

.au-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.au-btn-close {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.au-btn-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.au-modal-body {
  padding: 20px;
  overflow-y: auto;
  max-height: calc(85vh - 120px);
}

.au-modal-footer {
  padding: 14px 20px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  background: #fafafa;
}

.btn-au-cancel {
  padding: 8px 16px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-au-cancel:hover {
  background: #f8fafc;
  color: #1e293b;
}

.btn-au-submit {
  padding: 8px 18px;
  border: none;
  background: #2563eb;
  color: #ffffff;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-au-submit:hover {
  background: #1d4ed8;
}

/* ==========================================================================
   TMS ATTENDANCE & LIVE WORKING-TIME TRACKER STYLES
   ========================================================================== */

/* 1. Pulsing Live Dot Animation */
.live-pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  animation: livePulseAnim 1.8s infinite;
}

@keyframes livePulseAnim {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 7px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* 2. Topbar Live Clock Widget */
.header-clock-widget {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.header-clock-info {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.header-clock-status-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.header-clock-timer {
  font-family: 'JetBrains Mono', 'Roboto Mono', monospace, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
}

.header-clock-btn-wrap {
  display: flex;
  align-items: center;
}

.btn-header-clock-in {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
}

.btn-header-clock-in:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  transform: translateY(-1px);
}

.btn-header-clock-out {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.3);
}

.btn-header-clock-out:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  transform: translateY(-1px);
}

.header-action-divider {
  width: 1px;
  height: 22px;
  background: #e2e8f0;
  margin: 0 4px;
}

/* 3. Dashboard Clock Tracker Banner */
.dash-clock-tracker-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  border-left: 4px solid #2563eb;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.dash-clock-tracker-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-clock-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  width: fit-content;
}

.dash-clock-status-tag.clocked-in {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.dash-clock-status-tag.clocked-out {
  background: #f1f5f9;
  color: #64748b;
}

.dash-clock-timer-val {
  font-family: 'JetBrains Mono', 'Roboto Mono', monospace, sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.dash-clock-sub-text {
  font-size: 12.5px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 4px;
}

.dash-clock-tracker-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-dash-clock-in {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
  transition: all 0.15s ease;
}

.btn-dash-clock-in:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  transform: translateY(-1px);
}

.btn-dash-clock-out {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
  transition: all 0.15s ease;
}

.btn-dash-clock-out:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  transform: translateY(-1px);
}

.dash-clock-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #2563eb;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background 0.15s;
}

.dash-clock-link:hover {
  background: rgba(37, 99, 235, 0.08);
}

/* 4. Attendance Page Containers */
.attendance-page-container {
  padding: 20px 24px;
  width: 100%;
  box-sizing: border-box;
}

.attendance-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
}

.btn-att-refresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: all 0.15s;
}

.btn-att-refresh:hover {
  background: #f8fafc;
  color: #1e293b;
  border-color: #cbd5e1;
}

.att-date-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
}

/* 5. Attendance KPI Grid */
.attendance-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1280px) {
  .attendance-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .attendance-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.att-kpi-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  transition: transform 0.15s, box-shadow 0.15s;
}

.att-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

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

.att-kpi-details {
  display: flex;
  flex-direction: column;
}

.att-kpi-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.att-kpi-val {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

.att-kpi-sub {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}

/* 6. Filter Controls Bar */
.att-mobile-filter-header,
.att-emp-mobile-filter-header {
  display: none;
}

.att-emp-filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.attendance-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.att-filter-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.att-filter-lbl {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.att-input-select,
.att-input-date {
  padding: 7px 12px;
  height: 36px;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
  color: #1e293b;
  background: #f8fafc;
  outline: none;
  min-width: 160px;
  transition: border-color 0.15s;
}

.att-input-select:focus,
.att-input-date:focus {
  border-color: #2563eb;
  background: #ffffff;
}

.btn-att-reset-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
  flex-shrink: 0;
}

.btn-att-reset-icon:hover {
  background: #e2e8f0;
  color: #0f172a;
  border-color: #94a3b8;
}

.btn-att-reset-icon .material-symbols-rounded {
  font-size: 18px;
}

.btn-att-reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  height: 36px;
  box-sizing: border-box;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  color: #475569;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-att-reset:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* 7. Attendance Table Card */
.att-table-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

.att-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  background: #fafafa;
}

.att-count-badge {
  padding: 2px 8px;
  background: #e0e7ff;
  color: #3730a3;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 600;
}

.att-table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.att-data-table {
  width: 100%;
  min-width: 1050px;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  font-size: 13px;
}

.att-data-table thead tr {
  background: #f8fafc;
}

.att-data-table th {
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  border-bottom: 1px solid #e2e8f0;
}

.att-data-table tbody tr {
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.12s;
}

.att-data-table tbody tr:hover {
  background: #f8fafc;
}

.att-data-table td {
  padding: 13px 16px;
  color: #334155;
  vertical-align: middle;
  white-space: nowrap;
  border-bottom: 1px solid #f1f5f9;
}

.att-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}

.att-time-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', 'Roboto Mono', 'SF Mono', Consolas, monospace;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.att-time-cell.clock-in {
  color: #059669;
}

.att-time-cell.clock-out {
  color: #475569;
}

.att-time-cell .material-symbols-rounded {
  font-size: 16px;
}

.att-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  min-width: 94px;
  box-sizing: border-box;
}

.att-status-badge.active {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.att-status-badge.completed {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.att-status-badge.absent {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.att-punct-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.att-punct-badge.on-time {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.att-punct-badge.late {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* Late Timing & Early Leaving Badge Styles */
.att-late-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.att-early-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.att-ontime-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(16, 185, 129, 0.08);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.att-duration-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-family: 'JetBrains Mono', 'Roboto Mono', monospace, sans-serif;
  font-weight: 700;
  color: #0f172a;
  font-size: 12px;
  white-space: nowrap;
}

/* Export Action Dropdown */
.att-export-dropdown-wrap {
  position: relative;
  display: inline-block;
}

.btn-att-export-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 7px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #1e293b;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.15s ease;
  user-select: none;
}

.btn-att-export-main:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

.btn-att-export-main.active {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.att-export-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  padding: 6px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: attDropdownFadeIn 0.15s ease-out;
}

@keyframes attDropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.att-export-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
  text-decoration: none;
}

.att-export-menu-item:hover {
  background: #f8fafc;
}

.att-export-menu-item:hover .att-export-item-title {
  color: #2563eb;
}

.att-export-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.att-export-icon-box.csv {
  background: #ecfdf5;
  color: #059669;
}

.att-export-icon-box.pdf {
  background: #fef2f2;
  color: #dc2626;
}

.att-export-item-title {
  font-weight: 600;
  color: #0f172a;
  font-size: 12.5px;
  line-height: 1.3;
}

.att-export-item-sub {
  font-size: 10.5px;
  color: #64748b;
  line-height: 1.3;
}

/* 8. Employee Hero Card */
.emp-tracker-hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  gap: 24px;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}

.emp-hero-left {
  display: flex;
  flex-direction: column;
}

.emp-live-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.emp-live-status-pill.clocked-in {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.emp-live-status-pill.clocked-out {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.emp-live-status-pill.completed {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.emp-shift-tag {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 600;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 3px 10px;
  border-radius: 6px;
}

.emp-hero-timer-wrap {
  margin: 10px 0 14px 0;
}

.emp-timer-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.emp-timer-display {
  font-family: 'JetBrains Mono', 'Roboto Mono', monospace, sans-serif;
  font-size: 42px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.emp-hero-timestamps {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.emp-ts-box {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.emp-ts-label {
  color: #64748b;
}

.emp-ts-value {
  color: #0f172a;
  font-weight: 700;
}

.emp-ts-divider {
  width: 1px;
  height: 16px;
  background: #e2e8f0;
}

.emp-hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.emp-btn-action-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-clock-in-hero {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
  transition: all 0.15s ease;
}

.btn-clock-in-hero:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
}

.btn-clock-out-hero {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #ef4444;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);
  transition: all 0.15s ease;
}

.btn-clock-out-hero:hover {
  background: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35);
}

.emp-action-note {
  font-size: 12px;
  color: #64748b;
  max-width: 320px;
  text-align: right;
}

/* 9. Toast Notification System */
.tms-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.tms-toast-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #ffffff;
  background: #1e293b;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
  animation: toastSlideIn 0.25s ease forwards;
  transition: opacity 0.3s, transform 0.3s;
}

.tms-toast-item.success {
  background: #059669;
}

.tms-toast-item.error {
  background: #dc2626;
}

.tms-toast-item.info {
  background: #2563eb;
}

.tms-toast-item.fade-out {
  opacity: 0;
  transform: translateY(10px);
}

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

/* 10. Responsive Breakpoints */
@media (max-width: 768px) {
  .attendance-page-container {
    padding: 16px;
  }
  .emp-tracker-hero-card {
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
  }
  .emp-hero-right {
    align-items: flex-start;
    width: 100%;
  }
  .emp-timer-display {
    font-size: 36px;
  }
  .emp-action-note {
    text-align: left;
  }
  .dash-clock-tracker-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .dash-clock-tracker-right {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ==========================================================================
   TASK STATUS PILL & DROPDOWN MENU (Planning Page)
   ========================================================================== */
.btn-task-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 12.5px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-task-status-pill:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.btn-task-status-pill .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.status-dot.dot-todo {
  background: #94a3b8;
}

.status-dot.dot-prog {
  background: #3b82f6;
}

.status-dot.dot-done {
  background: #10b981;
}

.task-status-dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  min-width: 155px;
  padding: 8px 6px 6px;
  z-index: 1050;
  animation: fadeIn 0.15s ease;
}

.task-status-menu-header {
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
  padding: 4px 10px 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.task-status-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
  cursor: pointer;
  text-align: left;
  transition: all 0.12s ease;
}

.task-status-option:hover {
  background: #f1f5f9;
}

.task-status-option.active {
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
}

/* ==========================================================================
   TWO-WAY ADMIN <-> EMPLOYEE MESSAGING SYSTEM STYLES
   ========================================================================== */
.messages-page-container {
  padding: 16px 24px;
  background: #f8fafc;
  height: calc(100vh - 56px);
  max-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

/* 2-Panel Card Layout */
.messages-card-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  height: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Left Sidebar (Contacts) */
.messages-sidebar-panel {
  border-right: 1px solid #e2e8f0;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.messages-search-wrap {
  padding: 16px;
  border-bottom: 1px solid #f1f5f9;
}

.msg-search-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.msg-search-icon {
  position: absolute;
  left: 12px;
  color: #94a3b8;
  font-size: 18px;
  pointer-events: none;
}

.msg-search-box input {
  width: 100%;
  padding: 9px 36px 9px 36px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  color: #0f172a;
  outline: none;
  transition: all 0.15s ease;
  font-family: inherit;
}

.msg-search-box input:focus {
  background: #ffffff;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.btn-msg-search-clear {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
}

.messages-contacts-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 8px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}

.msg-contacts-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.05em;
}

.msg-contacts-count {
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 1px 7px;
  border-radius: 9999px;
}

.messages-contacts-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.msg-contact-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.msg-contact-card:hover {
  background: #f8fafc;
}

.msg-contact-card.active {
  background: #eff6ff;
}

.msg-contact-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #ffffff;
  font-weight: 700;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.msg-contact-info {
  flex: 1;
  min-width: 0;
}

.msg-contact-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}

.msg-contact-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-contact-card.active .msg-contact-name {
  color: #1d4ed8;
}

.msg-contact-time {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
}

.msg-contact-role-line {
  font-size: 11.5px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.msg-contact-last-msg {
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-contact-card.has-unread .msg-contact-last-msg {
  font-weight: 600;
  color: #0f172a;
}

.msg-unread-badge {
  background: #2563eb;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Right Chat Area */
.messages-chat-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

.chat-empty-state-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  background: #fbfcfe;
}

.chat-empty-icon-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.chat-active-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.chat-active-header {
  padding: 14px 20px;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.btn-chat-mobile-back {
  display: none;
  background: none;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px;
  color: #475569;
  cursor: pointer;
}

.chat-header-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.chat-header-user-info {
  min-width: 0;
}

.chat-header-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-header-name {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.chat-header-role-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.chat-header-sub {
  font-size: 12px;
  color: #64748b;
  margin-top: 1px;
}

.chat-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 4px 10px;
  border-radius: 9999px;
}

.chat-status-indicator .pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
}

/* Chat Messages Scroll Container */
.chat-messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-date-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0 6px;
  position: relative;
}

.chat-date-separator span {
  background: #e2e8f0;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 9999px;
  letter-spacing: 0.02em;
}

.chat-message-row {
  display: flex;
  width: 100%;
  position: relative;
  align-items: center;
  gap: 8px;
}

.chat-message-row.outgoing {
  justify-content: flex-end;
}

.chat-message-row.incoming {
  justify-content: flex-start;
}

.chat-message-row.outgoing .chat-bubble-actions {
  order: 1;
}

.chat-message-row.outgoing .chat-bubble {
  order: 2;
}

.chat-message-row.incoming .chat-bubble {
  order: 1;
}

.chat-message-row.incoming .chat-bubble-actions {
  order: 2;
}

/* Hover Action Buttons (Edit / Delete) */
.chat-bubble-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  transform: scale(0.92);
}

.chat-message-row:hover .chat-bubble-actions {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.btn-bubble-action {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: all 0.15s ease;
  padding: 0;
}

.btn-bubble-action span {
  font-size: 15px;
}

.btn-bubble-edit:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #2563eb;
}

.btn-bubble-delete:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.chat-bubble {
  max-width: 68%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.48;
  word-break: break-word;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.chat-bubble.bubble-mine {
  background: #2563eb;
  color: #ffffff;
  border-bottom-right-radius: 3px;
}

.chat-bubble.bubble-theirs {
  background: #ffffff;
  color: #1e293b;
  border: 1px solid #e2e8f0;
  border-bottom-left-radius: 3px;
}

.chat-bubble-sender {
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
  margin-bottom: 3px;
}

.chat-bubble-text {
  font-size: 13.5px;
}

.chat-bubble-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 4px;
}

.chat-bubble.bubble-mine .chat-bubble-time {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.75);
}

.chat-bubble.bubble-theirs .chat-bubble-time {
  font-size: 10.5px;
  color: #94a3b8;
}

.chat-bubble-edited-tag {
  font-size: 10px;
  font-style: italic;
  margin-left: 2px;
}

.chat-bubble.bubble-mine .chat-bubble-edited-tag {
  color: rgba(255, 255, 255, 0.8);
}

.chat-bubble.bubble-theirs .chat-bubble-edited-tag {
  color: #94a3b8;
}

.chat-no-messages-wrap {
  text-align: center;
  padding: 60px 20px;
}

/* Chat Editing Banner */
.chat-editing-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  padding: 6px 12px;
  margin-bottom: 8px;
}

.editing-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.editing-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #1d4ed8;
  white-space: nowrap;
}

.editing-preview {
  font-size: 12px;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
}

.btn-cancel-edit {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.btn-cancel-edit:hover {
  background: #dbeafe;
  color: #1e293b;
}

/* Delete Message Modal Backdrop & Dialog */
.msg-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.msg-modal-dialog {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-width: 420px;
  width: 100%;
  padding: 24px;
  text-align: center;
  border: 1px solid #e2e8f0;
}

.msg-modal-icon-wrap.danger {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fee2e2;
  color: #dc2626;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
}

.msg-modal-title {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}

.msg-modal-desc {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 14px;
  line-height: 1.45;
}

.msg-modal-preview-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: #334155;
  margin-bottom: 20px;
  text-align: left;
  word-break: break-word;
  font-style: italic;
}

.msg-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.btn-modal-cancel {
  padding: 8px 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-modal-cancel:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.btn-modal-delete {
  padding: 8px 18px;
  background: #dc2626;
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.btn-modal-delete:hover {
  background: #b91c1c;
}

/* Chat Input Footer */
.chat-input-form {
  padding: 14px 20px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.chat-input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 6px 10px;
  transition: all 0.15s ease;
}

.chat-input-wrapper:focus-within {
  background: #ffffff;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.chat-textarea {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 6px;
  font-size: 13.5px;
  color: #0f172a;
  outline: none;
  resize: none;
  max-height: 120px;
  line-height: 1.45;
  font-family: inherit;
}

.btn-chat-send {
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
  height: 36px;
}

.btn-chat-send:hover {
  background: #1d4ed8;
}

.btn-chat-send:disabled {
  background: #94a3b8;
  cursor: not-allowed;
}

.chat-input-hint {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 6px;
  padding-left: 4px;
}

/* Responsive Breakpoints */
@media (max-width: 900px) {
  .messages-card-layout {
    grid-template-columns: 280px 1fr;
  }
}

@media (max-width: 768px) {
  .messages-page-container {
    padding: 10px;
    height: calc(100vh - 56px);
  }
  .messages-card-layout {
    grid-template-columns: 1fr;
    height: 100%;
  }
  .messages-sidebar-panel {
    display: flex;
  }
  .messages-chat-panel {
    display: none;
  }
  .messages-card-layout.mobile-conversation-active .messages-sidebar-panel {
    display: none;
  }
  .messages-card-layout.mobile-conversation-active .messages-chat-panel {
    display: flex;
  }
  .btn-chat-mobile-back {
    display: inline-flex;
  }
}

/* Real-time Topbar Trigger Animations */
.chat-pulse-animation {
  animation: chatPulseRing 0.6s cubic-bezier(0.25, 1, 0.5, 1) 2;
}

@keyframes chatPulseRing {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.18);
    box-shadow: 0 0 14px rgba(37, 99, 235, 0.45);
  }
  100% {
    transform: scale(1);
  }
}

.bell-ring-animation {
  animation: bellRingShake 0.6s ease-in-out 2;
}

@keyframes bellRingShake {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(-15deg); }
  40% { transform: rotate(15deg); }
  60% { transform: rotate(-10deg); }
  80% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}

/* ==========================================================================
   GLOBAL MOBILE RESPONSIVENESS SYSTEM (TaskMS 100% Mobile Pixel-to-Pixel)
   ========================================================================== */

/* 1. Mobile Menu Buttons & Backdrop Defaults (Desktop Hidden) */
.mobile-menu-toggle-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  color: #1e293b;
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 8px;
  transition: all 0.15s ease;
}

.mobile-menu-toggle-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.sidebar-mobile-close-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sidebar-mobile-close-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.sidebar-backdrop {
  display: none;
}

body.sidebar-mobile-locked {
  overflow: hidden !important;
}

/* ==========================================================================
   BREAKPOINT: TABLETS & MOBILE (max-width: 992px)
   ========================================================================== */
@media (max-width: 992px) {
  /* Layout Shell */
  .mobile-menu-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #1e293b !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin-right: 8px !important;
    z-index: 110 !important;
    position: relative !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .sidebar-mobile-close-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border: none !important;
    border-radius: 6px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    cursor: pointer !important;
  }

  .sidebar-collapse-btn {
    display: none !important;
  }

  .sidebar-backdrop {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 999990 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
  }

  .sidebar-backdrop.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .app-sidebar,
  .app-sidebar.collapsed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    width: 280px !important;
    max-width: 85vw !important;
    z-index: 999999 !important;
    transform: translateX(-100%) !important;
    -webkit-transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s ease !important;
    box-shadow: none !important;
    border-right: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .app-sidebar.mobile-open,
  .app-sidebar.collapsed.mobile-open {
    transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35) !important;
    visibility: visible !important;
  }

  /* Force display of ALL sidebar items, labels, group headers, and profile on mobile */
  .app-sidebar .brand-text,
  .app-sidebar.collapsed .brand-text {
    display: inline-block !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
  }

  .app-sidebar .nav-text,
  .app-sidebar.collapsed .nav-text {
    display: inline-block !important;
    flex: 1 !important;
    font-size: 13.5px !important;
    color: inherit !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .app-sidebar .nav-group-header,
  .app-sidebar.collapsed .nav-group-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px 6px 14px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .app-sidebar .shortcut-badge,
  .app-sidebar.collapsed .shortcut-badge,
  .app-sidebar .help-text,
  .app-sidebar.collapsed .help-text,
  .app-sidebar .profile-meta,
  .app-sidebar.collapsed .profile-meta,
  .app-sidebar .nav-fav-star-btn,
  .app-sidebar.collapsed .nav-fav-star-btn,
  .app-sidebar .sidebar-profile-logout,
  .app-sidebar.collapsed .sidebar-profile-logout {
    display: flex !important;
  }

  .app-sidebar .sidebar-brand,
  .app-sidebar.collapsed .sidebar-brand {
    padding: 14px 18px !important;
    justify-content: space-between !important;
    display: flex !important;
    align-items: center !important;
    height: 56px !important;
  }

  .app-sidebar .sidebar-logo,
  .app-sidebar.collapsed .sidebar-logo {
    justify-content: flex-start !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .app-sidebar .sidebar-content,
  .app-sidebar.collapsed .sidebar-content {
    padding: 12px 10px !important;
    align-items: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    flex: 1 !important;
  }

  .app-sidebar .nav-accordion-section,
  .app-sidebar.collapsed .nav-accordion-section {
    width: 100% !important;
    margin-bottom: 4px !important;
  }

  .app-sidebar .nav-group-header,
  .app-sidebar.collapsed .nav-group-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px 6px 14px !important;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .app-sidebar .nav-sub-group,
  .app-sidebar.collapsed .nav-sub-group {
    display: none !important;
    padding-left: 2px !important;
    margin-top: 2px !important;
  }

  .app-sidebar .nav-accordion-section.active .nav-sub-group,
  .app-sidebar.collapsed .nav-accordion-section.active .nav-sub-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 3px !important;
    width: 100% !important;
  }

  .app-sidebar .nav-chevron,
  .app-sidebar.collapsed .nav-chevron {
    transition: transform 0.2s ease !important;
  }

  .app-sidebar .nav-accordion-section.active .nav-chevron,
  .app-sidebar.collapsed .nav-accordion-section.active .nav-chevron {
    transform: rotate(90deg) !important;
    color: #0f172a !important;
  }

  .app-sidebar .nav-item-link,
  .app-sidebar.collapsed .nav-item-link {
    width: 100% !important;
    height: auto !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    margin: 1px 0 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  .app-sidebar .sidebar-bottom-fixed,
  .app-sidebar.collapsed .sidebar-bottom-fixed {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 14px !important;
    border-top: 1px solid #f1f5f9 !important;
  }

  .app-sidebar .sidebar-profile,
  .app-sidebar.collapsed .sidebar-profile {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  .app-body,
  .app-body.collapsed {
    margin-left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    padding-top: 56px !important;
    overflow-x: hidden !important;
  }

  .app-header-top,
  .app-sidebar.collapsed ~ .app-body .app-header-top,
  .app-body.collapsed .app-header-top {
    left: 0 !important;
    width: 100% !important;
    padding: 0 14px !important;
    gap: 8px !important;
    justify-content: space-between !important;
  }

  .top-search-box-wrap {
    flex: 1;
    max-width: 280px;
    min-width: 0;
  }

  .top-search-box {
    width: 100% !important;
    padding: 6px 10px !important;
  }

  /* Projects Grid */
  .projects-grid-4col {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  .projects-table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .projects-table {
    min-width: 760px !important;
  }

  /* Tasks Table & Header */
  .tasks-table-card {
    padding: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .tasks-table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

  .tasks-data-table {
    min-width: 900px !important;
  }

  .tasks-header-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .tasks-header-left,
  .tasks-header-actions {
    width: 100% !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .tasks-search-box {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Timesheet */
  .timesheet-grid-card {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .ts-table-matrix {
    min-width: 720px !important;
  }

  .timesheet-top-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  .timesheet-week-navigator {
    width: 100% !important;
    justify-content: space-between !important;
  }

  /* Administration & Settings */
  .admin-table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .admin-data-table {
    min-width: 680px !important;
  }

  /* Auth Pages (signin.php & login.php) Mobile Spacing */
  .signin-page-container,
  .login-split-container {
    flex-direction: column !important;
    min-height: 100vh !important;
    width: 100% !important;
    background: #ffffff !important;
  }

  .signin-showcase-col,
  .login-hero-half {
    width: 100% !important;
    flex: none !important;
    padding: 32px 28px 24px 28px !important;
    min-height: auto !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }

  .showcase-header {
    max-width: 400px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .showcase-mockup-grid {
    display: none !important;
  }

  .signin-form-col,
  .login-form-half,
  .login-action-half {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 36px 28px 48px 28px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
  }

  .signin-card,
  .login-card {
    width: 100% !important;
    max-width: 380px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  .signin-card form,
  .login-card form {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .form-field {
    width: 100% !important;
    margin-bottom: 18px !important;
    box-sizing: border-box !important;
  }

  .form-input-wrap {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .form-input-wrap input {
    width: 100% !important;
    box-sizing: border-box !important;
    height: 44px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }

  .signin-options-row {
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 24px !important;
  }

  .btn-signin,
  .btn-login {
    width: 100% !important;
    height: 44px !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Dashboard Responsive Grid for Tablet */
  .dash-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .dash-bottom-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .budget-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* My Work Screen (Tablet) */
  .mywork-main {
    padding: 14px 16px 40px 16px !important;
  }

  .mywork-grid {
    grid-template-columns: 220px 1fr !important;
    gap: 16px !important;
  }
}

/* ==========================================================================
   BREAKPOINT: STANDARD MOBILE (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Global Content Padding */
  .dash-pulse-container,
  .mywork-main {
    padding: 12px 12px 32px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .projects-page-container,
  .projects-container,
  .tasks-page-container,
  .timesheet-page-container,
  .attendance-page-container,
  .reminders-main-content,
  .notif-page-container,
  .admin-page-container,
  .profile-container,
  .feedback-main-container,
  .feedback-page-container,
  .feedback-container,
  .flowchart-container,
  .search-page-container {
    padding: 12px 12px 32px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Topbar Details on Mobile */
  .app-header-top {
    padding: 0 10px !important;
    height: 52px !important;
  }

  .app-body {
    padding-top: 52px !important;
  }

  .top-search-box-wrap {
    display: none !important;
  }

  .top-actions {
    gap: 4px !important;
  }

  .top-nav-icon-btn {
    width: 34px !important;
    height: 34px !important;
  }

  .top-notif-badge {
    top: 2px !important;
    right: 2px !important;
    font-size: 9.5px !important;
    padding: 1px 4px !important;
  }

  .header-clock-widget {
    padding: 2px 6px !important;
    gap: 4px !important;
  }

  .header-clock-info {
    display: flex;
    flex-direction: column;
  }

  .header-clock-status-row {
    display: none !important;
  }

  .header-clock-timer {
    font-size: 11.5px !important;
    font-weight: 700 !important;
  }

  .btn-header-clock-in,
  .btn-header-clock-out {
    padding: 4px 8px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }

  .btn-header-clock-in span:last-child,
  .btn-header-clock-out span:last-child {
    display: none;
  }

  .header-action-divider {
    display: none !important;
  }

  /* Popovers */
  .header-popover,
  .notif-popover-panel,
  #remindersPopover {
    position: fixed !important;
    top: 56px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
  }

  /* ==========================================================================
     Dashboard Responsive Rules (Header, KPI cards, Budget, Charts)
     ========================================================================== */
  .dash-header-row,
  .dash-greeting-wrap {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 0 0 8px 0 !important;
    margin-bottom: 8px !important;
    position: static !important;
    top: auto !important;
  }

  .dash-title-wrap {
    width: 100% !important;
  }

  .dash-title-wrap h1 {
    font-size: 20px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    line-height: 1.25 !important;
    margin: 0 0 2px 0 !important;
  }

  .dash-title-wrap p {
    font-size: 12px !important;
    color: #64748b !important;
    margin: 0 0 4px 0 !important;
  }

  .user-filter-pill {
    font-size: 11.5px !important;
    padding: 3px 8px !important;
  }

  .dash-action-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    margin-bottom: 6px !important;
  }

  .dash-action-buttons .btn-dash-white {
    flex: 1 1 calc(50% - 4px) !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 12px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  .dash-action-buttons .btn-dash-blue {
    flex: 1 1 100% !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 12.5px !important;
    padding: 9px 12px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /* Employee Clock Tracker Banner */
  .dash-clock-tracker-banner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    margin-bottom: 14px !important;
  }

  .dash-clock-tracker-left {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .dash-clock-timer-val {
    font-size: 24px !important;
  }

  .dash-clock-tracker-right {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    align-items: center !important;
  }

  .btn-dash-clock-in,
  .btn-dash-clock-out {
    width: 100% !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
  }

  .dash-clock-link {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    margin-top: 4px !important;
  }

  /* Metric KPI Grids: Strictly 2 cards per row on mobile */
  .dash-kpi-grid,
  .dash-stats-grid,
  .dash-kpi-row,
  .dash-metrics-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
  }

  .dash-kpi-card {
    padding: 12px 10px !important;
    border-radius: 10px !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 102px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    word-break: break-word !important;
  }

  .dash-kpi-header {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
    min-width: 0 !important;
  }

  .dash-kpi-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }

  .dash-kpi-title {
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    color: #64748b !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
    min-width: 0 !important;
    flex: 1 !important;
  }

  .dash-kpi-value {
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
    word-break: break-word !important;
  }

  .dash-kpi-sub {
    font-size: 10px !important;
    line-height: 1.25 !important;
    color: #64748b !important;
    word-break: break-word !important;
  }

  /* 11th Card: BUDGETED HOURS takes full width */
  .budget-kpi-row {
    margin-bottom: 12px !important;
    width: 100% !important;
    display: block !important;
  }

  .budget-kpi-card {
    padding: 12px 14px !important;
    border-radius: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: auto !important;
  }

  /* Billable Projects Budget Box */
  .billable-budget-box {
    padding: 14px 12px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 14px !important;
  }

  .billable-header-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .billable-title-wrap {
    width: 100% !important;
  }

  .billable-title-wrap h3 {
    font-size: 14.5px !important;
    margin: 0 0 4px 0 !important;
  }

  .billable-title-wrap p {
    font-size: 11.5px !important;
    margin: 0 !important;
  }

  .billable-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .billable-controls .budget-dropdown-wrap {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 110px !important;
    position: relative !important;
  }

  .billable-controls .control-pill {
    width: 100% !important;
    justify-content: space-between !important;
    font-size: 11.5px !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
  }

  .billable-controls .btn-dash-white {
    flex: 1 1 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 8px 12px !important;
  }

  .budget-dropdown-menu {
    max-width: calc(100vw - 32px) !important;
  }

  /* Budget Metrics 4 Cards */
  .budget-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
  }

  .budget-stat-card {
    padding: 10px 12px !important;
    border-radius: 8px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .budget-stat-label {
    font-size: 9.5px !important;
    margin-bottom: 3px !important;
  }

  .budget-stat-value {
    font-size: 16px !important;
    word-break: break-word !important;
  }

  /* Project Progress Item */
  .budget-project-item {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    border-radius: 8px !important;
  }

  .project-info-left {
    width: 100% !important;
    justify-content: space-between !important;
    min-width: 0 !important;
  }

  .project-progress-mid {
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
  }

  .project-budget-right {
    width: 100% !important;
    justify-content: space-between !important;
    gap: 10px !important;
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 8px !important;
  }

  /* Bottom 2-Column Grids */
  .dash-bottom-grid,
  .dash-charts-grid,
  .dash-widgets-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .trend-card,
  .glance-card,
  .activity-card,
  .trends-area-card,
  .status-card,
  .upcoming-card,
  .priority-card,
  .category-card,
  .spend-card,
  .perf-card,
  .dash-chart-card,
  .dash-widget-card {
    padding: 14px 12px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  .trend-chart-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

  .chart-bars-wrap {
    min-width: 300px !important;
  }

  .trend-legend {
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
    font-size: 11px !important;
  }

  .spend-card-header,
  .perf-card-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .spend-controls {
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .spend-stats-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .spend-stat-num {
    font-size: 15px !important;
  }

  /* ==========================================================================
     My Work Screen (Mobile)
     ========================================================================== */
  .mywork-title-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 2px 0 10px 0 !important;
    margin-bottom: 12px !important;
    position: static !important;
    top: auto !important;
  }

  .mywork-title-group {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  .mywork-title-group h1 {
    font-size: 20px !important;
    margin: 0 !important;
  }

  .mywork-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .mywork-controls .mywork-dropdown-container {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 120px !important;
    position: relative !important;
  }

  .mywork-controls .proj-filter-pill {
    width: 100% !important;
    justify-content: space-between !important;
    padding: 7px 10px !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
  }

  .mywork-controls .date-pill-wrap {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 120px !important;
    position: relative !important;
  }

  .mywork-controls .date-pill {
    width: 100% !important;
    justify-content: space-between !important;
    padding: 4px 6px !important;
    box-sizing: border-box !important;
  }

  .mywork-controls .date-pill-center {
    font-size: 11.5px !important;
  }

  .mywork-controls > div[style*="position: relative"] {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  .mywork-controls .search-work-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 12px 8px 32px !important;
    font-size: 13px !important;
  }

  .mywork-custom-dropdown,
  .month-selector-dropdown {
    width: 100% !important;
    min-width: 220px !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
    z-index: 150 !important;
  }

  /* My Work Grid Layout (Stack left panel and right panel) */
  .mywork-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .mywork-left-panel {
    width: 100% !important;
    max-width: 100% !important;
  }

  .me-card {
    padding: 12px 14px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
  }

  .me-card-header-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .me-collapse-chevron {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    color: #64748b !important;
    transition: transform 0.25s ease !important;
  }

  .me-card.mobile-collapsed .me-collapse-chevron {
    transform: rotate(0deg) !important;
  }

  .me-card:not(.mobile-collapsed) .me-collapse-chevron {
    transform: rotate(180deg) !important;
  }

  .me-card.mobile-collapsed .me-card-body {
    display: none !important;
  }

  .me-card:not(.mobile-collapsed) .me-card-body {
    display: block !important;
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid #f1f5f9 !important;
  }

  .me-user-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
  }

  .me-avatar-circle {
    width: 38px !important;
    height: 38px !important;
    font-size: 14px !important;
  }

  .team-member-select {
    margin-top: 10px !important;
    width: 100% !important;
  }

  .team-member-select select {
    width: 100% !important;
    font-size: 13px !important;
    padding: 8px 10px !important;
  }

  .filter-section {
    margin-top: 12px !important;
  }

  .filter-section-title {
    font-size: 10.5px !important;
    margin-bottom: 6px !important;
  }

  .filter-item {
    padding: 8px 10px !important;
    font-size: 12.5px !important;
  }

  .mywork-right-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .work-section-box {
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 14px !important;
    overflow: hidden !important;
  }

  .work-section-header {
    padding: 12px 14px !important;
    font-size: 12px !important;
  }

  .work-section-body,
  #favouritesTableWrap {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .projects-table {
    width: 100% !important;
    min-width: 520px !important;
    font-size: 12px !important;
  }

  .projects-table th {
    padding: 8px 10px !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
  }

  .projects-table td {
    padding: 10px 10px !important;
    white-space: nowrap !important;
  }

  .project-title-cell {
    gap: 8px !important;
  }

  .table-pagination {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px !important;
    text-align: center !important;
  }

  .table-pagination .pagination-controls {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  /* Projects Screen Mobile Responsiveness (< 768px) */
  .projects-page-container {
    padding: 10px 10px 32px 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .projects-header-row {
    position: static !important;
    top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    margin: 0 0 12px 0 !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    z-index: 30 !important;
  }

  .projects-title-left {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .projects-title-left h1 {
    font-size: 18px !important;
    font-weight: 700 !important;
  }

  .projects-actions-right {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .btn-proj-pill {
    flex: 1 1 auto !important;
    justify-content: center !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
  }

  .view-toggle-group {
    flex: 0 0 auto !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
  }

  .view-btn {
    padding: 5px 9px !important;
    font-size: 11.5px !important;
  }

  .btn-create-proj-blue {
    flex: 1 1 100% !important;
    justify-content: center !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    min-height: 38px !important;
    order: 4 !important;
    box-sizing: border-box !important;
  }

  .top-action-more-wrap {
    flex: 0 0 auto !important;
  }

  .btn-proj-more {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 8px !important;
  }

  /* Projects Filter Toolbar */
  #projectsFilterBar {
    padding: 12px 12px !important;
    margin-bottom: 12px !important;
    border-radius: 10px !important;
  }

  #projectsFilterBar > div {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  #projectsFilterBar .admin-search-box {
    width: 100% !important;
    max-width: 100% !important;
  }

  #projectsFilterBar .admin-status-select {
    width: 100% !important;
    max-width: 100% !important;
  }

  #filterResultsCount {
    text-align: center !important;
    font-size: 11.5px !important;
  }

  /* Projects Grid */
  .projects-grid-4col {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
    width: 100% !important;
  }

  .projects-grid-4col[style*="display: none"] {
    display: none !important;
  }

  .projects-list-view-card[style*="display: none"] {
    display: none !important;
  }

  .project-tile-card {
    padding: 14px 14px !important;
    border-radius: 12px !important;
    min-height: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 10px !important;
  }

  .tile-top-header {
    gap: 6px !important;
    width: 100% !important;
  }

  .tile-title-group {
    gap: 8px !important;
    min-width: 0 !important;
    flex: 1 !important;
  }

  .tile-icon-box {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
  }

  .tile-name {
    font-size: 14px !important;
    max-width: 100% !important;
  }

  .tile-code-badge {
    font-size: 10.5px !important;
    padding: 1px 5px !important;
  }

  .tile-status-sub-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .tile-description {
    font-size: 11.5px !important;
    min-height: auto !important;
    -webkit-line-clamp: 2 !important;
    line-height: 1.4 !important;
  }

  .tile-meta-line {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 6px !important;
    font-size: 11px !important;
  }

  .tile-progress-section {
    margin-top: 4px !important;
  }

  .tile-owner-row {
    padding-top: 8px !important;
    gap: 6px !important;
  }

  .owner-name-text {
    font-size: 12px !important;
    max-width: 150px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Projects List and Grid Pagination on Mobile */
  .projects-list-pagination,
  .projects-grid-pagination {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .projects-list-pagination {
    border-top: 1px solid #f1f5f9 !important;
    background: #ffffff !important;
    border-radius: 0 0 12px 12px !important;
  }

  .projects-grid-pagination {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    margin-top: 14px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  }

  .projects-list-pagination .pagin-left,
  .projects-grid-pagination .pagin-left {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    width: 100% !important;
  }

  .projects-list-pagination .pagin-right,
  .projects-grid-pagination .pagin-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .pagin-counts-text {
    font-size: 12px !important;
    color: #64748b !important;
    text-align: center !important;
  }

  .pagin-btn-group {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
  }

  .pagin-btn {
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
  }

  /* Projects List View Table on Mobile */
  .projects-list-view-card {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    margin-bottom: 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  }

  .projects-table-scroll-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

  .projects-list-table {
    min-width: 620px !important;
  }

  /* ==========================================================================
     TASKS PAGE MOBILE RESPONSIVENESS (< 768px)
     ========================================================================== */
  .tasks-page-container {
    padding: 10px 10px 32px 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .tasks-header-row {
    position: static !important;
    top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    margin: 0 0 12px 0 !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    z-index: 30 !important;
  }

  .tasks-tabs-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .tab-pill-btn {
    flex: 1 1 50% !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    min-height: 38px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  .tasks-actions-right {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .tasks-search-wrap {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    order: 1 !important;
  }

  .tasks-search-input {
    width: 100% !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
  }

  .tasks-filters-dropdown-container,
  .tasks-columns-dropdown-container {
    flex: 1 1 auto !important;
    display: inline-flex !important;
  }

  .btn-task-action {
    flex: 1 1 auto !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    font-size: 12.5px !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
  }

  /* Filter Modal and Columns Dropdown on Mobile */
  .tasks-filters-dropdown-menu,
  .tasks-columns-dropdown-menu {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 24px) !important;
    max-width: 440px !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    z-index: 10000 !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3) !important;
    padding: 18px !important;
    box-sizing: border-box !important;
  }

  .filter-section-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .filter-pills-group {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Tasks Table Card & Scroll */
  .tasks-table-card {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    margin-bottom: 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  }

  .tasks-table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

  .tasks-data-table {
    min-width: 780px !important;
    font-size: 12px !important;
  }

  .tasks-data-table th {
    padding: 10px 10px !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
  }

  .tasks-data-table td {
    padding: 10px 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* Tasks Bottom Pagination on Mobile */
  .tasks-bottom-pagination {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
    border-radius: 0 0 12px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    text-align: center !important;
    z-index: 10 !important;
  }

  .tasks-bottom-pagination .pagin-left {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    width: 100% !important;
  }

  .tasks-bottom-pagination .pagin-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* ==========================================================================
     FEEDBACK PAGE MOBILE RESPONSIVENESS (< 768px)
     ========================================================================== */
  .feedback-main-container,
  .feedback-page-container {
    padding: 12px 12px 32px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: auto !important;
    background: #ffffff !important;
  }

  .fb-header-block {
    margin-bottom: 14px !important;
  }

  .fb-title {
    font-size: 18px !important;
  }

  .fb-subtitle {
    font-size: 12px !important;
    line-height: 1.45 !important;
    margin-top: 4px !important;
  }

  .fb-tabs-nav {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    margin-bottom: 16px !important;
    padding-bottom: 0 !important;
    width: 100% !important;
  }

  .fb-tabs-nav::-webkit-scrollbar {
    display: none !important;
  }

  .fb-tab-item {
    flex-shrink: 0 !important;
    font-size: 13px !important;
    padding: 8px 2px !important;
  }

  .fb-cards-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 12px !important;
    width: 100% !important;
  }

  .fb-card {
    padding: 14px 14px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .fb-card-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  .fb-author-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex: 1 !important;
  }

  .fb-author-avatar {
    width: 30px !important;
    height: 30px !important;
    font-size: 11.5px !important;
    flex-shrink: 0 !important;
  }

  .fb-author-name {
    font-size: 13px !important;
    max-width: 130px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .fb-meta-date {
    font-size: 11px !important;
  }

  .fb-rating-stars {
    font-size: 12.5px !important;
    letter-spacing: 1px !important;
    flex-shrink: 0 !important;
  }

  .fb-card-subject {
    font-size: 14px !important;
    margin: 0 0 4px 0 !important;
    word-break: break-word !important;
  }

  .fb-card-msg {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    margin: 0 0 10px 0 !important;
    word-break: break-word !important;
  }

  .fb-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding-top: 8px !important;
  }

  .fb-target-pill {
    font-size: 10.5px !important;
    padding: 2px 7px !important;
  }

  .fb-empty-card {
    padding: 48px 16px !important;
    margin-top: 12px !important;
  }

  /* Planning Screen */
  .planning-split-layout {
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    min-height: calc(100vh - 56px) !important;
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .planning-left-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    border-right: none !important;
    border-bottom: 1px solid #eef2f6 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }

  .plan-search-header {
    padding: 10px 12px 8px 12px !important;
  }

  .plan-tree-title-row {
    padding: 6px 12px 6px 12px !important;
  }

  .plan-tree-scroll {
    max-height: 220px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px 10px !important;
  }

  .plan-tree-footer {
    padding: 8px 12px !important;
  }

  /* Collapsed sidebar on mobile turns into a sleek horizontal chip rail */
  .planning-left-sidebar.collapsed {
    width: 100% !important;
    height: auto !important;
    min-height: 48px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .planning-left-sidebar.collapsed .plan-collapsed-top-icon {
    display: flex !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
  }

  .planning-left-sidebar.collapsed .plan-collapsed-rail {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 !important;
    gap: 8px !important;
    flex: 1 !important;
    scrollbar-width: none !important;
  }

  .planning-left-sidebar.collapsed .plan-collapsed-rail::-webkit-scrollbar {
    display: none !important;
  }

  .planning-left-sidebar.collapsed .plan-chip-item {
    flex-shrink: 0 !important;
  }

  .planning-left-sidebar.collapsed .plan-tree-footer {
    border-top: none !important;
    padding: 0 !important;
    margin-left: 8px !important;
    display: flex !important;
    flex-shrink: 0 !important;
  }

  .planning-left-sidebar.collapsed .btn-tree-expand-bottom {
    display: flex !important;
    width: 32px !important;
    height: 32px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Main content area */
  .planning-main-content {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .plan-breadcrumbs-row {
    padding: 8px 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    gap: 6px !important;
    scrollbar-width: none !important;
  }

  .plan-breadcrumbs-row::-webkit-scrollbar {
    display: none !important;
  }

  .breadcrumb-pill {
    font-size: 11.5px !important;
    padding: 3px 8px !important;
  }

  .plan-actions-toolbar-row {
    padding: 8px 12px !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .plan-actions-toolbar-row::-webkit-scrollbar {
    display: none !important;
  }

  .plan-actions-right {
    width: max-content !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  .btn-plan-ctrl {
    padding: 5px 10px !important;
    font-size: 12px !important;
  }

  .plan-task-search-wrap input {
    width: 125px !important;
    font-size: 12px !important;
    padding: 5px 10px 5px 30px !important;
  }

  /* Table & Empty State */
  .planning-table-container {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  .planning-data-table {
    min-width: 580px !important;
    width: 100% !important;
  }

  .plan-empty-center-container {
    padding: 36px 14px 24px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .plan-inline-task-wrap {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .plan-inline-task-form {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
  }

  .plan-inline-task-input {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .btn-plan-inline-create {
    width: 100% !important;
  }

  /* Filter Popover, Drawers & Modals on mobile */
  .plan-flt-popover {
    position: fixed !important;
    top: 60px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
    z-index: 99999 !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
  }

  .plan-flt-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .gantt-settings-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  .map-status-dialog {
    width: 92vw !important;
    max-width: 92vw !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    margin: 16px auto !important;
  }

  .map-status-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .map-status-label {
    width: 100% !important;
  }

  .map-status-arrow {
    display: none !important;
  }

  .map-status-select-wrap {
    width: 100% !important;
  }

  /* Timesheet Screen Mobile Responsiveness (< 768px) */
  .timesheet-page-wrap {
    padding: 12px 12px 32px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .timesheet-top-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
  }

  .timesheet-title-group {
    width: 100% !important;
  }

  .timesheet-page-title {
    font-size: 18px !important;
  }

  .timesheet-view-toggle {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }

  .btn-ts-view {
    flex: 1 !important;
    text-align: center !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
  }

  .timesheet-subnav-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding-bottom: 12px !important;
    margin-bottom: 14px !important;
  }

  .timesheet-tabs-group {
    width: 100% !important;
    display: flex !important;
  }

  .ts-tab-btn {
    padding: 6px 14px !important;
    font-size: 12px !important;
  }

  .timesheet-controls-group {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  #tsEmpSelectContainer,
  #tsEmpSelect,
  .ts-select-pill {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .ts-week-navigator {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    padding: 6px 12px !important;
  }

  .ts-day-section {
    margin-bottom: 14px !important;
  }

  .ts-day-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
  }

  .ts-day-badge {
    font-size: 11.5px !important;
    padding: 3px 10px !important;
  }

  .ts-day-total {
    font-size: 11.5px !important;
    padding: 3px 10px !important;
  }

  /* Inline Task Creator Row on Mobile */
  .ts-input-row {
    border-radius: 12px !important;
    padding: 10px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-top: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .ts-input-name {
    width: 100% !important;
    font-size: 13.5px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding-bottom: 4px !important;
  }

  .ts-v-div {
    display: none !important;
  }

  .ts-input-desc {
    width: 100% !important;
    font-size: 12.5px !important;
    padding-bottom: 2px !important;
  }

  .ts-input-bottom-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 8px !important;
    margin-top: 2px !important;
  }

  .ts-actions-slot {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .ts-time-slot {
    border-left: none !important;
    padding-left: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
  }

  .ts-time-select {
    font-size: 11px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 3px 4px !important;
  }

  .ts-hours-slot {
    border-left: none !important;
    padding: 0 4px !important;
    min-width: auto !important;
    font-size: 11.5px !important;
  }

  .btn-ts-submit-row {
    width: 30px !important;
    height: 30px !important;
    flex-shrink: 0 !important;
  }

  .btn-ts-cancel-row {
    width: 30px !important;
    height: 30px !important;
    flex-shrink: 0 !important;
  }

  /* Logged Task Card on Mobile */
  .ts-task-card {
    border-radius: 12px !important;
    padding: 10px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .ts-task-left {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }

  .ts-task-title {
    width: 100% !important;
    font-size: 13.5px !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .ts-task-desc {
    width: 100% !important;
    font-size: 12px !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .ts-task-meta-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    border-top: 1px solid #f8fafc !important;
    padding-top: 6px !important;
    margin-top: 2px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .ts-task-mid {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11.5px !important;
  }

  .ts-task-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .timesheet-weekly-summary {
    justify-content: space-between !important;
    padding: 12px 6px !important;
    font-size: 13px !important;
  }

  .timesheet-history-card {
    border-radius: 10px !important;
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .ts-history-table {
    min-width: 650px !important;
    width: 100% !important;
  }

  .timesheet-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Attendance Screen */
  .attendance-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Attendance Screen Mobile Filter Dropdown */
  .att-mobile-filter-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    user-select: none !important;
    transition: all 0.15s ease !important;
  }

  .att-mobile-filter-header:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
  }

  .att-mobile-filter-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
  }

  .att-active-filter-badge {
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
  }

  .attendance-filter-bar {
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 14px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    margin-bottom: 16px !important;
    animation: slideDownAttFilter 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .attendance-filter-bar.mobile-open {
    display: flex !important;
  }

  @keyframes slideDownAttFilter {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .att-filter-item {
    width: 100% !important;
  }

  .att-filter-reset-item {
    margin-top: 4px !important;
  }

  .att-filter-reset-item .btn-att-reset-icon {
    width: 100% !important;
    height: 38px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    cursor: pointer !important;
  }

  .att-filter-reset-item .btn-att-reset-icon::after {
    content: 'Reset Filters';
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
  }

  /* Employee View History Filter Dropdown */
  .att-emp-mobile-filter-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 9px 12px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    margin-top: 6px !important;
    user-select: none !important;
  }

  .att-emp-filter-group {
    display: none !important;
    width: 100% !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 8px !important;
    animation: slideDownAttFilter 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .att-emp-filter-group.mobile-open {
    display: flex !important;
  }

  /* Attendance Daily Logs List & Table */
  .att-table-card {
    border-radius: 10px !important;
    margin-top: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .att-table-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }

  .att-table-header > div:last-child {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .att-table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
  }

  .att-data-table {
    min-width: 820px !important;
    width: 100% !important;
  }

  .att-data-table th {
    padding: 10px 12px !important;
    font-size: 10.5px !important;
  }

  .att-data-table td {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }

  .att-user-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
  }

  .employee-punch-card {
    padding: 20px 14px !important;
  }

  .emp-clock-btns-row {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .btn-emp-punch {
    width: 100% !important;
    justify-content: center !important;
    min-height: 44px !important;
  }

  /* Reminders Screen */
  .reminders-top-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .reminders-card-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  .reminders-card-actions {
    width: 100% !important;
    justify-content: flex-end !important;
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 8px !important;
    margin-top: 4px !important;
  }

  /* Notifications Screen */
  .notif-filter-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    padding-bottom: 4px !important;
  }

  .notif-item-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 12px 14px !important;
  }

  /* ==========================================================================
     FLOWCHART SCREEN MOBILE RESPONSIVENESS (< 768px)
     ========================================================================== */
  .flowchart-page-wrap {
    padding: 12px 12px 32px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .flowchart-top-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
  }

  .flowchart-title-group {
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  .flowchart-page-title {
    font-size: 18px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .flowchart-page-subtitle {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    margin-top: 2px !important;
  }

  .flowchart-top-actions {
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .flowchart-top-actions > div:first-child {
    flex: 1 !important;
    width: auto !important;
  }

  .flowchart-top-actions input {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 12px !important;
    height: 36px !important;
  }

  .btn-fc-action {
    height: 36px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .flowchart-canvas-card {
    padding: 16px 8px !important;
    min-height: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .fc-org-chart-wrapper {
    min-width: 760px !important;
    padding-bottom: 12px !important;
  }

  .fc-company-card {
    padding: 10px 18px !important;
    min-width: 180px !important;
    border-radius: 10px !important;
  }

  .fc-company-name {
    font-size: 14px !important;
  }

  .fc-company-label {
    font-size: 10.5px !important;
  }

  .fc-company-icon {
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 4px !important;
  }

  .fc-categories-row {
    padding-top: 18px !important;
  }

  .fc-categories-row::before {
    height: 18px !important;
  }

  .fc-categories-container {
    gap: 10px !important;
    padding-top: 12px !important;
  }

  .fc-category-col {
    min-width: 165px !important;
    max-width: 185px !important;
  }

  .fc-dept-card {
    padding: 8px 10px !important;
    max-width: 100% !important;
  }

  .fc-dept-title {
    font-size: 11.5px !important;
  }

  .fc-dept-pill {
    font-size: 9.5px !important;
    padding: 1px 6px !important;
  }

  .fc-member-card {
    padding: 7px 8px !important;
    max-width: 100% !important;
    gap: 6px !important;
  }

  .fc-avatar-box {
    width: 24px !important;
    height: 24px !important;
    font-size: 10px !important;
  }

  .fc-member-name {
    font-size: 11px !important;
  }

  .fc-member-role {
    font-size: 9.5px !important;
  }

  .fc-dept-projects-deck {
    padding: 8px !important;
    max-width: 100% !important;
  }

  .fc-proj-mini-title {
    font-size: 11px !important;
  }

  .fc-proj-mini-status {
    font-size: 9px !important;
  }

  /* Modals Across All Pages */
  .modal-dialog,
  .global-search-modal-dialog,
  .nr-modal-dialog,
  .msg-modal-dialog,
  .au-modal-dialog {
    width: 94vw !important;
    max-width: 94vw !important;
    margin: 12px auto !important;
    border-radius: 14px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  .modal-header,
  .modal-body,
  .modal-footer,
  .au-modal-header,
  .au-modal-body,
  .au-modal-footer {
    padding: 14px 16px !important;
  }

  /* Convert 2-column modal forms into 1 column on mobile */
  .modal-body div[style*="grid-template-columns"],
  .modal-body form div[style*="grid-template-columns"],
  .au-modal-body div[style*="grid-template-columns"],
  .au-modal-body form div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Form Controls */
  .form-control,
  .admin-input,
  .att-input-select,
  .nr-form-input,
  .reminders-input,
  .au-input,
  .au-select,
  .au-textarea {
    width: 100% !important;
    font-size: 14px !important; /* Prevents auto-zoom on iOS Safari */
    min-height: 38px !important;
  }

  /* Pagination Controls */
  .tasks-bottom-pagination,
  .projects-bottom-pagination {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 14px !important;
  }

  /* ==========================================================================
     ADMINISTRATION SCREEN MOBILE RESPONSIVENESS (< 768px)
     ========================================================================== */
  .admin-page-container {
    padding: 12px 12px 32px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .admin-top-tabs-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    padding-bottom: 6px !important;
    scrollbar-width: none !important;
    width: 100% !important;
  }

  .admin-top-tabs-nav::-webkit-scrollbar {
    display: none !important;
  }

  .admin-tab-btn {
    flex-shrink: 0 !important;
    font-size: 12.5px !important;
    padding: 7px 14px !important;
    white-space: nowrap !important;
    border-radius: 8px !important;
  }

  .admin-controls-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
    width: 100% !important;
  }

  .admin-filters-left {
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .admin-search-box {
    width: 100% !important;
    max-width: 100% !important;
  }

  .admin-search-box input {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
    height: 38px !important;
  }

  .admin-status-select {
    width: 100% !important;
    font-size: 13px !important;
    height: 38px !important;
    box-sizing: border-box !important;
  }

  .btn-add-user-blue {
    width: 100% !important;
    justify-content: center !important;
    height: 38px !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
  }

  .admin-table-card {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    margin-bottom: 16px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
  }

  .admin-table-scroll-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
  }

  .admin-table-pagination {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
    position: relative !important;
  }

  .admin-table-pagination .pagin-left,
  .admin-table-pagination .pagin-right {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .admin-table {
    min-width: 720px !important;
    width: 100% !important;
  }

  .admin-table th,
  .admin-table td {
    padding: 10px 12px !important;
    font-size: 12.5px !important;
  }

  #admin-tab-teams > div[style*="grid"],
  #admin-tab-roles > div[style*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #admin-tab-settings div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .btn-send-login-pill {
    font-size: 11px !important;
    padding: 3px 8px !important;
  }

  .nested-picker-modal .au-modal-dialog {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 10px auto !important;
  }
}

/* ==========================================================================
   BREAKPOINT: EXTRA SMALL MOBILE (max-width: 480px & 320px)
   ========================================================================== */
@media (max-width: 480px) {
  .top-search-box-wrap {
    display: none !important;
  }

  .dash-stats-grid,
  .dash-kpi-row,
  .dash-metrics-grid,
  .timesheet-kpi-grid,
  .attendance-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /* Donut and Legend Stack */
  .donut-status-wrap {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .status-legend-list {
    width: 100% !important;
  }

  /* Priority Bars */
  .priority-bars-container {
    gap: 6px !important;
  }

  .priority-col {
    min-width: 0 !important;
  }

  .priority-val {
    font-size: 12px !important;
  }

  .priority-label {
    font-size: 9.5px !important;
  }

  .p-bar-dash {
    width: 20px !important;
  }

  .p-bar-tall.unset {
    width: 22px !important;
  }

  .dash-action-buttons .btn-dash-white {
    flex: 1 1 calc(50% - 4px) !important;
  }

  .proj-owner-hover-wrap {
    flex-wrap: wrap !important;
  }

  .tile-meta-line {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .chat-textarea {
    font-size: 14px !important;
  }

  .btn-chat-send {
    padding: 6px 12px !important;
  }

  /* Auth Spacing on Small Screens (375px - 480px) */
  .signin-showcase-col,
  .login-hero-half {
    padding: 24px 20px 20px 20px !important;
  }

  .signin-form-col,
  .login-form-half,
  .login-action-half {
    padding: 28px 20px 40px 20px !important;
  }

  .signin-card,
  .login-card {
    max-width: 100% !important;
  }
}

/* Extra Small Screen (320px - 360px) */
@media (max-width: 360px) {
  .dash-pulse-container {
    padding: 8px 8px 24px 8px !important;
  }

  /* Retain 2 cards per row on 320-360px screens */
  .dash-kpi-grid,
  .dash-stats-grid,
  .dash-kpi-row,
  .dash-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .dash-kpi-card {
    padding: 10px 8px !important;
  }

  .dash-kpi-title {
    font-size: 8.5px !important;
  }

  .dash-kpi-value {
    font-size: 18px !important;
  }

  .dash-action-buttons .btn-dash-white,
  .dash-action-buttons .btn-dash-blue {
    flex: 1 1 100% !important;
  }

  .billable-controls .budget-dropdown-wrap {
    flex: 1 1 100% !important;
  }

  .mywork-main {
    padding: 8px 8px 24px 8px !important;
  }

  .mywork-controls .mywork-dropdown-container,
  .mywork-controls .date-pill-wrap {
    flex: 1 1 100% !important;
  }

  .budget-metrics-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .spend-stats-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .signin-showcase-col,
  .login-hero-half {
    padding: 20px 16px 16px 16px !important;
  }

  .signin-form-col,
  .login-form-half,
  .login-action-half {
    padding: 24px 16px 36px 16px !important;
  }

  .signin-title {
    font-size: 22px !important;
    margin-bottom: 20px !important;
  }

  .form-field {
    margin-bottom: 14px !important;
  }
}

/* ==========================================================================
   MILESTONES & ROADMAP FEATURE STYLES (Native TaskMS Design Language)
   ========================================================================== */
.ms-modal-dialog {
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
}

.ms-header-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #eff6ff;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #bfdbfe;
}

.ms-count-badge {
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 2px 8px;
  border-radius: 9999px;
}

.ms-mode-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 4px 10px;
  border-radius: 8px;
}

.ms-toggle-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}

.ms-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.ms-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: 0.3s;
  border-radius: 18px;
}

.ms-toggle-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.ms-toggle-switch input:checked + .ms-toggle-slider {
  background-color: #2563eb;
}

.ms-toggle-switch input:checked + .ms-toggle-slider:before {
  transform: translateX(16px);
}

.ms-progress-strip {
  padding: 12px 22px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}

.ms-overall-badge {
  font-size: 11.5px;
  font-weight: 700;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 1px 8px;
  border-radius: 9999px;
}

.ms-overall-bar-track {
  width: 100%;
  height: 7px;
  background: #e2e8f0;
  border-radius: 9999px;
  overflow: hidden;
}

.ms-overall-bar-fill {
  width: 0%;
  height: 100%;
  background: #2563eb;
  border-radius: 9999px;
  transition: width 0.3s ease, background-color 0.3s ease;
}

@media (max-width: 768px) {
  #msModalSplitGrid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ==========================================================================
   TaskMS Global Interactive Help Center & Project Guide Modal
   ========================================================================== */
.tms-help-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: tmsHelpFadeIn 0.2s ease-out;
}

@keyframes tmsHelpFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

.tms-help-container {
  width: 100%;
  max-width: 960px;
  height: 86vh;
  max-height: 740px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: tmsHelpModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Top Header */
.tms-help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  gap: 16px;
}

.tms-help-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tms-help-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1d72f2, #7c3aed);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(29, 114, 242, 0.25);
}

.tms-help-icon-badge .material-symbols-rounded {
  font-size: 22px;
}

.tms-help-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
}

.tms-help-subtitle {
  font-size: 12px;
  color: #64748b;
  margin: 3px 0 0 0;
}

.tms-help-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tms-help-search-wrap {
  position: relative;
  width: 280px;
  display: flex;
  align-items: center;
}

.tms-help-search-icon {
  position: absolute;
  left: 10px;
  font-size: 18px;
  color: #94a3b8;
  pointer-events: none;
}

.tms-help-search-wrap input {
  width: 100%;
  height: 36px;
  padding: 0 32px 0 34px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  color: #0f172a;
  outline: none;
  transition: all 0.15s ease;
}

.tms-help-search-wrap input:focus {
  background: #ffffff;
  border-color: #1d72f2;
  box-shadow: 0 0 0 3px rgba(29, 114, 242, 0.12);
}

.tms-help-search-clear {
  position: absolute;
  right: 6px;
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.tms-help-search-clear:hover {
  color: #475569;
  background: #e2e8f0;
}

.tms-help-search-clear .material-symbols-rounded {
  font-size: 16px;
}

.tms-help-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tms-help-close-btn:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}

.tms-help-close-btn .material-symbols-rounded {
  font-size: 20px;
}

/* Modal Body */
.tms-help-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Sidebar */
.tms-help-sidebar {
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
  padding: 14px 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.tms-help-cat-group-label {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.06em;
  padding: 4px 10px 6px;
  text-transform: uppercase;
}

.tms-help-cat-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #475569;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  margin-bottom: 2px;
}

.tms-help-cat-btn .material-symbols-rounded {
  font-size: 18px;
  color: #64748b;
  flex-shrink: 0;
}

.tms-help-cat-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.tms-help-cat-btn.active {
  background: #e8f1fe;
  color: #1d72f2;
  font-weight: 600;
}

.tms-help-cat-btn.active .material-symbols-rounded {
  color: #1d72f2;
}

.tms-help-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 9999px;
  background: #e2e8f0;
  color: #475569;
  margin-left: auto;
}

.tms-help-badge.admin {
  background: #fee2e2;
  color: #b91c1c;
}

.tms-help-sidebar-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}

.tms-help-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #64748b;
  font-weight: 500;
  padding: 4px 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  width: 100%;
}

/* Content Area */
.tms-help-content {
  padding: 22px 28px;
  overflow-y: auto;
  min-height: 0;
  background: #ffffff;
}

.tms-help-section {
  display: none;
}

.tms-help-section.active {
  display: block;
  animation: tmsHelpFadeIn 0.2s ease-out;
}

.tms-help-section-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}

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

.tms-help-section-icon .material-symbols-rounded {
  font-size: 22px;
}

.tms-help-section-title {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.tms-help-section-desc {
  font-size: 12.5px;
  color: #64748b;
  margin: 3px 0 0;
}

/* Guide Cards */
.tms-help-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.tms-help-guide-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.tms-card-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #f1f5f9;
  color: #475569;
  padding: 2px 7px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.tms-help-guide-card h4 {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px 0;
}

.tms-help-guide-card p {
  font-size: 12.5px;
  color: #475569;
  line-height: 1.5;
  margin-bottom: 10px;
}

.tms-help-list {
  padding-left: 18px;
  margin: 0;
  font-size: 12px;
  color: #475569;
  line-height: 1.6;
}

.tms-help-list li {
  margin-bottom: 5px;
}

.tms-help-list.numbered {
  padding-left: 20px;
}

.tms-formula-box {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  padding: 6px 10px;
  border-radius: 6px;
  margin-top: 6px;
  font-size: 11.5px;
}

/* Step Grid */
.tms-step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.tms-step-item {
  display: flex;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
}

.tms-step-num {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: #1d72f2;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tms-step-content h5 {
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 3px 0;
}

.tms-step-content p {
  font-size: 11.5px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

/* Module Blocks */
.tms-help-module-block {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
}

.tms-module-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.tms-module-header .icon {
  font-size: 22px;
  color: #1d72f2;
  background: #ffffff;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.tms-module-header h4 {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.tms-module-header h4 a {
  color: #1d72f2;
  text-decoration: none;
}

.tms-module-header h4 a:hover {
  text-decoration: underline;
}

.tms-module-header span {
  font-size: 11.5px;
  color: #64748b;
}

.tms-module-body p {
  font-size: 12.5px;
  color: #475569;
  line-height: 1.5;
  margin-bottom: 8px;
}

/* Quick Links Box */
.tms-help-quicklinks-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 18px;
}

.tms-help-quicklinks-box h4 {
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px 0;
}

.tms-help-pill-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tms-pill-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  transition: all 0.15s ease;
}

.tms-pill-link .material-symbols-rounded {
  font-size: 15px;
  color: #1d72f2;
}

.tms-pill-link:hover {
  background: #1d72f2;
  color: #ffffff;
  border-color: #1d72f2;
}

.tms-pill-link:hover .material-symbols-rounded {
  color: #ffffff;
}

/* Admin Guide Tabs */
.tms-admin-guide-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.tms-admin-guide-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
}

.tms-admin-guide-card h5 {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px 0;
}

.tms-admin-guide-card p {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  line-height: 1.45;
}

/* Keyboard Shortcuts Table */
.tms-shortcuts-table-wrap {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}

.tms-shortcuts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  text-align: left;
}

.tms-shortcuts-table th {
  background: #f8fafc;
  color: #475569;
  font-weight: 700;
  padding: 10px 14px;
  border-bottom: 1px solid #e2e8f0;
}

.tms-shortcuts-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
}

.tms-shortcuts-table tr:last-child td {
  border-bottom: none;
}

.tms-shortcuts-table kbd,
.tms-help-modal-footer kbd {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 2px 6px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: #0f172a;
  box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}

/* FAQ Details Accordion */
.tms-faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tms-faq-item {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
  transition: all 0.15s ease;
}

.tms-faq-item[open] {
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.tms-faq-summary {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  user-select: none;
}

.tms-faq-summary::-webkit-details-marker {
  display: none;
}

.tms-faq-summary .arrow {
  font-size: 20px;
  color: #94a3b8;
  transition: transform 0.2s ease;
}

.tms-faq-item[open] .tms-faq-summary .arrow {
  transform: rotate(180deg);
  color: #1d72f2;
}

.tms-faq-content {
  padding: 0 16px 14px 16px;
  font-size: 12.5px;
  color: #475569;
  line-height: 1.55;
  border-top: 1px solid #f1f5f9;
  padding-top: 10px;
}

.tms-faq-content p {
  margin: 0 0 6px 0;
}

.tms-faq-content p:last-child {
  margin-bottom: 0;
}

/* Empty Search State */
.tms-help-search-empty {
  text-align: center;
  padding: 40px 20px;
}

.tms-help-search-empty h4 {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 12px 0 6px;
}

.tms-help-search-empty p {
  font-size: 12.5px;
  color: #64748b;
  max-width: 360px;
  margin: 0 auto 16px;
}

.tms-help-btn-primary {
  padding: 7px 14px;
  background: #1d72f2;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.tms-help-btn-primary:hover {
  background: #155bc0;
}

/* Bottom Footer */
.tms-help-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  font-size: 12px;
}

.tms-help-footer-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #475569;
}

.tms-help-btn-secondary {
  padding: 6px 14px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tms-help-btn-secondary:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .tms-help-backdrop {
    padding: 12px;
  }
  .tms-help-container {
    height: 94vh;
    max-height: none;
  }
  .tms-help-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .tms-help-header-actions {
    width: 100%;
  }
  .tms-help-search-wrap {
    width: 100%;
  }
  .tms-help-body {
    grid-template-columns: 1fr;
  }
  .tms-help-sidebar {
    max-height: 120px;
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    padding: 8px 10px;
  }
  .tms-help-cat-group-label,
  .tms-help-sidebar-footer {
    display: none;
  }
  .tms-help-cat-btn {
    white-space: nowrap;
    width: auto;
  }
  .tms-help-content {
    padding: 16px;
  }
  .tms-help-card-grid {
    grid-template-columns: 1fr;
  }
  .tms-help-modal-footer {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}