/**
 * Task Manager v3.0 — blue theme (GENERATED)
 *
 * Do NOT edit this file directly. Edit css/theme/ and run scripts/build-css.sh
 */

/* ===== theme/tokens.css ===== */
/**
 * UCSSACCO Task Management — blue theme
 */
:root {
  --uc-brand-50: #eff6ff;
  --uc-brand-100: #dbeafe;
  --uc-brand-200: #bfdbfe;
  --uc-brand-300: #93c5fd;
  --uc-brand-400: #60a5fa;
  --uc-brand-500: #3b82f6;
  --uc-brand-600: #2563eb;
  --uc-brand-700: #1d4ed8;
  --uc-brand-800: #1e40af;
  --uc-gradient-brand: linear-gradient(135deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%);
  --uc-gradient-shell: linear-gradient(180deg, #334155 0%, #1e293b 45%, #0f172a 100%);
  --uc-shell-column-bg: #1e293b;

  --uc-sidebar-width: 220px;
  --uc-sidebar-width-collapsed: 64px;
  --uc-header-height: 52px;
  --uc-footer-height: 40px;

  --uc-bg: #f4f6f8;
  --uc-surface: #ffffff;
  --uc-surface-raised: #ffffff;
  --uc-surface-muted: #f8fafc;

  --uc-text: #1e293b;
  --uc-text-muted: #64748b;
  --uc-text-on-brand: rgba(255, 255, 255, 0.96);

  --uc-border: #e2e8f0;
  --uc-border-strong: #cbd5e1;
  --uc-focus-ring: rgba(37, 99, 235, 0.28);

  --uc-sidebar-gradient: var(--uc-gradient-shell);
  --uc-sidebar-bg: var(--uc-shell-column-bg);
  --uc-sidebar-bg-elevated: rgba(15, 23, 42, 0.45);
  --uc-sidebar-border: rgba(255, 255, 255, 0.1);
  --uc-sidebar-border-hover: rgba(255, 255, 255, 0.18);
  --uc-sidebar-hover: rgba(255, 255, 255, 0.08);
  --uc-sidebar-active: rgba(45, 212, 191, 0.14);
  --uc-sidebar-text: rgba(255, 255, 255, 0.95);
  --uc-sidebar-text-mid: rgba(255, 255, 255, 0.82);
  --uc-sidebar-text-muted: rgba(255, 255, 255, 0.5);
  --uc-sidebar-accent: #2dd4bf;
  --uc-sidebar-accent-soft: rgba(45, 212, 191, 0.12);
  --uc-sidebar-green: #34d399;

  --uc-radius-sm: 6px;
  --uc-radius-md: 8px;
  --uc-radius-lg: 10px;
  --uc-radius-full: 999px;

  --uc-font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --uc-font-size-xs: 11px;
  --uc-font-size-sm: 13px;
  --uc-font-size-base: 14px;
  --uc-font-size-lg: 15px;
  --uc-font-size-xl: 18px;
  --uc-font-size-sidebar-label: 10px;
  --uc-font-size-sidebar-nav: 13px;
  --uc-font-size-sidebar-meta: 11px;
  --uc-sidebar-icon-size: 16px;
  --uc-sidebar-link-py: 6px;
  --uc-sidebar-link-px: 10px;

  --uc-shadow-sm: none;
  --uc-shadow-md: none;

  --uc-danger: #dc2626;
  --uc-success: #059669;
  --uc-warning: #d97706;

  --shell-brand-gradient: var(--uc-gradient-brand);
  --shell-sidebar-bg: var(--uc-shell-column-bg);
  --shell-sidebar-border: var(--uc-sidebar-border);
  --shell-sidebar-width: var(--uc-sidebar-width);
  --shell-header-height: var(--uc-header-height);
  --shell-footer-height: var(--uc-footer-height);
  --shell-surface: var(--uc-surface);
  --shell-bg: var(--uc-bg);
  --shell-text: var(--uc-text);
  --shell-muted: var(--uc-text-muted);
  --shell-accent: var(--uc-brand-500);
  --shell-font: var(--uc-font-family);

  --brand-deep: var(--uc-brand-600);
  --brand-mid: var(--uc-brand-800);
  --brand-accent: var(--uc-brand-500);
  --brand-gradient: var(--uc-gradient-brand);
  --surface: var(--uc-surface);
  --surface-muted: var(--uc-bg);
  --text-primary: var(--uc-text);
  --text-secondary: var(--uc-text-muted);
  --text-on-brand: var(--uc-text-on-brand);
  --border: var(--uc-border);
  --border-focus: var(--uc-brand-500);
  --radius-lg: var(--uc-radius-lg);
  --radius-md: var(--uc-radius-md);
  --radius-sm: var(--uc-radius-sm);
  --font-sans: var(--uc-font-family);
}

/* ===== theme/base.css ===== */
/**
 * UCSSACCO — base styles
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body#body,
body.auth-page {
  margin: 0;
  font-family: var(--uc-font-family);
  font-size: var(--uc-font-size-base) !important;
  font-weight: 400;
  line-height: 1.5;
  color: var(--uc-text);
  background: var(--uc-bg) !important;
  padding-bottom: 0 !important;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Bootstrap 3 sets 14px on body — force readable sizes in the shell */
body#body .mainpanel,
body#body .mainpanel .page-content,
body#body .mainpanel .main-content,
body#body .mainpanel .main-content-inner,
body#body .contentpanel {
  font-size: var(--uc-font-size-base) !important;
}

body#body .btn,
body#body .form-control,
body#body input,
body#body select,
body#body textarea,
body#body .dropdown-menu,
body#body .panel,
body#body .panel-body,
body#body .table,
body#body .modal-content,
body#body .lh-topbar,
body#body .uc-tasks {
  font-family: var(--uc-font-family) !important;
  font-size: var(--uc-font-size-sm) !important;
}

body#body .leftpanel.uc-sidebar,
body#body .uc-appbar {
  font-size: var(--uc-font-size-base);
}

a {
  color: var(--uc-brand-600);
}

a:hover,
a:focus {
  color: var(--uc-brand-700);
}

.uc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== theme/icons.css ===== */
/**
 * Icon font — Font Awesome 4.7 (CDN). Local copy had no font files.
 */
.uc-sidebar .fa,
.uc-appbar .fa,
#body .fa,
.auth-page .fa {
  font-family: FontAwesome !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.auth-page .auth-input-icon,
.auth-page .auth-feature-icon > .fa,
.auth-page .auth-toggle-password > .fa {
  speak: none;
}

/* Shared colored icons (content area) */
.tm-icon--blue { color: #2563eb; }
.tm-icon--amber { color: #d97706; }
.tm-icon--green { color: #059669; }
.tm-icon--violet { color: #7c3aed; }
.tm-icon--rose { color: #e11d48; }
.tm-icon--cyan { color: #0891b2; }
.tm-icon--indigo { color: #4f46e5; }

/* Sidebar — colored icons on dark shell */
.uc-sidebar__icon .fa {
  font-size: var(--uc-sidebar-icon-size);
  width: var(--uc-sidebar-icon-size);
}

#dash .uc-sidebar__icon .fa { color: #93c5fd; }
#projects .uc-sidebar__icon .fa { color: #fcd34d; }
#create_task .uc-sidebar__icon .fa { color: #6ee7b7; }
#all_tasks .uc-sidebar__icon .fa { color: #c4b5fd; }
#created_by_me .uc-sidebar__icon .fa { color: #fda4af; }
#my_tasks .uc-sidebar__icon .fa { color: #93c5fd; }
#pending .uc-sidebar__icon .fa { color: #fcd34d; }
#to_approve .uc-sidebar__icon .fa { color: #67e8f9; }
#rejectedd .uc-sidebar__icon .fa { color: #fca5a5; }
#completed .uc-sidebar__icon .fa { color: #6ee7b7; }
#team_members .uc-sidebar__icon .fa { color: #67e8f9; }
#departments .uc-sidebar__icon .fa { color: #fdba74; }
#reports .uc-sidebar__icon .fa { color: #a5b4fc; }
#module_tasks .uc-sidebar__icon .fa { color: #93c5fd; }
#module_calendar .uc-sidebar__icon .fa { color: #d8b4fe; }
#module_meetings .uc-sidebar__icon .fa { color: #5eead4; }

#events .uc-sidebar__icon .fa,
a.uc-sidebar__link[href*='events'] .uc-sidebar__icon .fa { color: #d8b4fe; }

#meetings .uc-sidebar__icon .fa,
a.uc-sidebar__link[href*='meetings'] .uc-sidebar__icon .fa { color: #5eead4; }

.uc-sidebar__section-toggle-label .fa-address-book-o {
  color: #fda4af;
}

.uc-sidebar__directory-avatar .fa-user {
  color: #93c5fd;
}

.uc-sidebar__directory-avatar--dept .fa-building-o {
  color: #fdba74;
}

.uc-sidebar__logout .fa-sign-out {
  color: #fca5a5;
}

/* Empty states — icon color by glyph */
.tm-empty__icon .fa-check-circle { color: #059669; }
.tm-empty__icon .fa-folder-open,
.tm-empty__icon .fa-folder-open-o { color: #d97706; }
.tm-empty__icon .fa-tasks { color: #2563eb; }
.tm-empty__icon .fa-inbox { color: #64748b; }

/* Action button icons */
.uc-tasks__btn--primary .fa { color: rgba(255, 255, 255, 0.92); }
.uc-tasks__btn--muted .fa-eye { color: #2563eb; }
.uc-tasks__btn--muted .fa-plus { color: #059669; }
.uc-tasks__btn--muted .fa-pencil { color: #7c3aed; }
.uc-tasks__btn--muted .fa-arrow-left { color: #64748b; }

/* ===== theme/shell.css ===== */
/**
 * App shell layout (replaces Quirk header/sidebar/main structure)
 */

/* One continuous brand column behind logo + sidebar (matches login auth-brand) */
body#body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: var(--uc-sidebar-width);
  height: 100vh;
  height: 100dvh;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.2) 100%),
    radial-gradient(circle at 18% 82%, rgba(255, 255, 255, 0.08) 0%, transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.06) 0%, transparent 38%),
    var(--uc-gradient-shell);
  z-index: 1985;
  pointer-events: none;
}

body#body::before,
.leftpanel.uc-sidebar {
  transition: width 0.2s ease, left 0.2s ease, opacity 0.2s ease;
}

.leftpanel.uc-sidebar,
.leftpanel {
  transition: width 0.2s ease, left 0.2s ease;
}

.uc-appbar__brand.logopanel,
.mainpanel,
.footer.app-shell-footer {
  transition: width 0.2s ease, left 0.2s ease, margin-left 0.2s ease;
}

.headerpanel,
.headerpanel.uc-appbar,
.uc-appbar.headerpanel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.headerpanel .logopanel {
  position: relative;
  left: auto;
  margin-left: 0;
}

.headerbar {
  position: static !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  left: auto !important;
  float: none;
}

.menutoggle {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
}

.leftpanel {
  position: fixed;
  top: var(--uc-header-height);
  bottom: 0;
  left: calc(-1 * var(--uc-sidebar-width));
  width: var(--uc-sidebar-width);
  z-index: 1990;
  overflow: hidden;
}

.leftpanelinner {
  height: 100%;
}

.mainpanel {
  padding-top: var(--uc-header-height) !important;
  padding-bottom: var(--uc-footer-height);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--uc-bg);
}

.contentpanel,
.mainpanel .page-content,
.mainpanel #content .main-content {
  padding: 1rem 1.25rem 1.75rem;
  position: relative;
}

.mainpanel .page-content:has(.uc-home) {
  padding-top: 1rem;
}

.contentpanel::after {
  display: table;
  clear: both;
  content: "";
}

@media (min-width: 992px) {
  .leftpanel.uc-sidebar,
  .leftpanel {
    left: 0 !important;
  }

  .mainpanel {
    margin-left: var(--uc-sidebar-width) !important;
  }

  /* Flex app bar: toolbar sits beside brand — no Quirk margin offset */
  .headerpanel.uc-appbar .headerbar,
  .headerpanel.uc-appbar .uc-appbar__toolbar.headerbar {
    margin-left: 0 !important;
    left: auto !important;
  }

  body.uc-sidebar-collapsed {
    --uc-sidebar-width: var(--uc-sidebar-width-collapsed);
  }

  body.uc-sidebar-collapsed .logopanel,
  body.uc-sidebar-collapsed .uc-appbar__brand.logopanel,
  body.uc-sidebar-collapsed .leftpanel.uc-sidebar,
  body.uc-sidebar-collapsed .leftpanel {
    margin-left: 0 !important;
    left: 0 !important;
    width: var(--uc-sidebar-width-collapsed) !important;
    max-width: var(--uc-sidebar-width-collapsed) !important;
    flex-basis: var(--uc-sidebar-width-collapsed) !important;
  }

  body.uc-sidebar-collapsed .mainpanel {
    margin-left: var(--uc-sidebar-width-collapsed) !important;
    left: auto !important;
    width: auto !important;
  }

  body.uc-sidebar-collapsed .footer.app-shell-footer {
    margin-left: 0 !important;
    left: var(--uc-sidebar-width-collapsed) !important;
    width: calc(100% - var(--uc-sidebar-width-collapsed)) !important;
  }
}

@media (max-width: 991px) {
  .mainpanel {
    position: relative;
    margin-left: 0 !important;
  }

  /* Drawer + backdrop sit above the app bar (z-index 2000) */
  body.uc-sidebar-mobile-open .leftpanel.uc-sidebar,
  body.uc-sidebar-mobile-open .leftpanel {
    top: 0 !important;
    bottom: 0;
    height: 100dvh;
    left: 0 !important;
    z-index: 2100;
  }

  body.uc-sidebar-mobile-open {
    overflow: hidden;
  }

  body#body::before {
    left: calc(-1 * var(--uc-sidebar-width));
    width: var(--uc-sidebar-width);
    z-index: 2095;
  }

  body#body.uc-sidebar-mobile-open::before {
    left: 0;
    z-index: 2095;
  }

  .leftpanel.uc-sidebar,
  .leftpanel {
    width: var(--uc-sidebar-width) !important;
    top: 0;
    bottom: 0;
    height: 100dvh;
  }
}

.uc-shell__overlay {
  display: none;
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(15, 23, 42, 0.45);
  z-index: 2090;
  cursor: pointer;
}

@media (max-width: 991px) {
  .uc-shell__overlay:not([hidden]) {
    z-index: 2090;
  }
}

.uc-shell__overlay:not([hidden]) {
  display: block;
}

@media (max-width: 480px) {
  .contentpanel {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Footer */
.footer.app-shell-footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0;
  right: 0;
  z-index: 1000 !important;
  height: var(--uc-footer-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  background: var(--uc-surface) !important;
  border-top: 1px solid var(--uc-border);
  box-shadow: none;
}

@media (min-width: 992px) {
  .footer.app-shell-footer {
    left: var(--uc-sidebar-width);
    width: calc(100% - var(--uc-sidebar-width));
    margin-left: 0 !important;
  }
}

.app-shell-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  padding: 0 1.5rem;
  font-size: var(--uc-font-size-xs) !important;
  line-height: 1.35;
  color: var(--uc-text-muted);
}

.app-shell-footer__inner a {
  font-size: inherit !important;
  color: var(--uc-brand-400);
  font-weight: 500;
  text-decoration: none;
}

.app-shell-footer__inner a:hover {
  text-decoration: underline;
}

/* Breadcrumbs (Quirk class still used in pages) */
.breadcrumb-quirk {
  padding: 0;
  background: transparent;
  margin-bottom: 1rem;
  font-size: var(--uc-font-size-sm);
}

.breadcrumb-quirk > li + li:before {
  content: "\f105";
  font-family: FontAwesome;
  color: var(--uc-text-muted);
  margin-right: 0.35rem;
}

.breadcrumb-quirk > li.active {
  color: var(--uc-text);
  font-weight: 500;
}

/* ===== theme/task-shell.css ===== */
/* Task Management — slate sidebar shell, blue content accents */

body#body::before {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.18) 100%),
    radial-gradient(circle at 18% 82%, rgba(45, 212, 191, 0.06) 0%, transparent 42%),
    var(--uc-gradient-shell);
}

.auth-brand::before {
  background:
    radial-gradient(circle at 18% 78%, rgba(147, 197, 253, 0.14) 0%, transparent 48%),
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.06) 0%, transparent 42%);
}

.uc-sidebar__link--active {
  background: var(--uc-sidebar-active) !important;
  border-left: 2px solid var(--uc-sidebar-accent);
}

.uc-appbar__stat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  margin-right: 0.5rem;
  font-size: var(--uc-font-size-xs);
  font-weight: 600;
  background: var(--uc-surface-muted);
  border: 1px solid var(--uc-border);
  border-radius: var(--uc-radius-sm);
  color: var(--uc-text-muted);
}

.uc-appbar__stat i {
  color: var(--uc-brand-600);
  font-size: 12px;
}

/* ===== theme/appbar.css ===== */
/* Top app bar — simple, flat toolbar */

.headerpanel.uc-appbar,
.uc-appbar.headerpanel {
  height: var(--uc-header-height, 60px) !important;
  min-height: var(--uc-header-height, 60px);
  box-shadow: none !important;
}

.uc-appbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--uc-header-height, 60px);
  z-index: 2000;
  display: flex;
  align-items: stretch;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  font-family: var(--uc-font-family);
}

/* Brand column (matches sidebar width) */

.uc-appbar__brand.logopanel {
  position: relative;
  left: auto;
  flex: 0 0 var(--uc-sidebar-width, 252px);
  width: var(--uc-sidebar-width, 252px);
  height: 100%;
  margin: 0;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  background: transparent !important;
  background-color: transparent !important;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: none;
  z-index: 2001;
}

.uc-appbar__brand-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  text-decoration: none !important;
  color: #fff !important;
  transition: opacity 0.15s ease;
}

.uc-appbar__brand-link:hover {
  opacity: 0.9;
}

.uc-appbar__brand-logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  padding: 3px;
  box-shadow: none;
}

.uc-appbar__brand-copy strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.uc-appbar__brand-copy small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  opacity: 0.88;
}

body.uc-sidebar-collapsed .uc-appbar__brand.logopanel {
  justify-content: center;
  padding: 0 0.5rem;
}

body.uc-sidebar-collapsed .uc-appbar__brand-copy {
  display: none;
}

/* Toolbar */

.uc-appbar__toolbar.headerbar {
  flex: 1;
  min-width: 0;
  margin: 0 !important;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--uc-surface, #fff);
  border-bottom: 1px solid var(--uc-border, #e2e8f0);
}

.uc-appbar__leading {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  flex-shrink: 0;
}

.uc-appbar .uc-appbar__menu.menutoggle,
.uc-appbar .menutoggle {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--uc-radius-sm);
  background: transparent;
  color: var(--uc-text-muted);
  font-size: 17px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.uc-appbar .uc-appbar__menu.menutoggle:hover,
.uc-appbar .menutoggle:hover {
  background: var(--uc-surface-muted);
  color: var(--uc-text);
}

.uc-appbar .menutoggle i {
  position: static !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
}

.uc-appbar__title {
  margin: 0;
  padding: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--uc-text);
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12rem;
}

@media (min-width: 768px) {
  .uc-appbar__title {
    max-width: 16rem;
  }
}

/* Search */

.uc-appbar__search-wrap {
  flex: 1;
  max-width: 420px;
  min-width: 140px;
  margin: 0 0.5rem 0 auto;
  position: relative;
}

.uc-appbar__search.search-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
}

.uc-appbar__search-label {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  color: var(--uc-text-muted);
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.uc-appbar__search:has(.uc-appbar__search-input:focus) .uc-appbar__search-label {
  color: var(--uc-brand-400);
  opacity: 1;
}

.uc-appbar__search-input,
.uc-appbar__search .seaarch {
  width: 100% !important;
  height: 38px !important;
  padding: 0 14px 0 2.5rem !important;
  border: 1px solid var(--uc-border) !important;
  border-radius: var(--uc-radius-full) !important;
  background: var(--uc-surface) !important;
  font-size: 14px !important;
  font-weight: 400;
  color: var(--uc-text) !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.uc-appbar__search-input:hover {
  border-color: var(--uc-border-strong) !important;
}

.uc-appbar__search-input::placeholder {
  color: var(--uc-text-muted);
  opacity: 0.75;
}

.uc-appbar__search-input:focus {
  outline: none;
  border-color: var(--uc-brand-400) !important;
  box-shadow: 0 0 0 3px var(--uc-focus-ring) !important;
}

.uc-appbar__search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 14px;
  width: 14px;
  margin-right: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
}

.uc-appbar__search button {
  display: none !important;
}

.uc-appbar__search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 2100;
  max-height: min(70vh, 420px);
  overflow: auto;
  padding: 0.5rem 0;
  background: var(--uc-surface);
  border: 1px solid var(--uc-border);
  border-radius: var(--uc-radius-md);
  box-shadow: none;
}

.uc-appbar__search-status {
  padding: 0.75rem 1rem;
  font-size: 13px;
  color: var(--uc-text-muted);
}

.uc-appbar__search-group + .uc-appbar__search-group {
  border-top: 1px solid var(--uc-border);
  margin-top: 0.35rem;
  padding-top: 0.35rem;
}

.uc-appbar__search-group-title {
  margin: 0;
  padding: 0.35rem 1rem 0.25rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--uc-text-muted);
}

.uc-appbar__search-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.uc-appbar__search-hit {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 1rem;
  text-decoration: none !important;
  color: var(--uc-text) !important;
  transition: background 0.1s ease;
}

.uc-appbar__search-hit:hover,
.uc-appbar__search-hit:focus {
  background: var(--uc-surface-muted);
}

.uc-appbar__search-hit-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.uc-appbar__search-hit-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.uc-appbar__search-hit-body strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uc-appbar__search-hit-body small {
  display: block;
  font-size: 11px;
  color: var(--uc-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uc-appbar__search-all {
  display: block;
  margin: 0.35rem 0.5rem 0.25rem;
  padding: 0.55rem 0.75rem;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--uc-brand-600) !important;
  text-decoration: none !important;
  border-radius: var(--uc-radius-sm);
  background: var(--uc-surface-muted);
}

.uc-appbar__search-all:hover,
.uc-appbar__search-all:focus {
  background: rgba(33, 58, 123, 0.08);
  color: var(--uc-brand-400) !important;
}

/* Actions */

.uc-appbar__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* User menu */

.uc-appbar__user.dropdown {
  position: relative;
}

.uc-appbar__user-btn {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  height: 36px;
  max-width: 200px;
  padding: 0 0.5rem 0 0.25rem !important;
  border: none !important;
  border-radius: var(--uc-radius-full) !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background 0.15s ease;
}

.uc-appbar__user-btn:hover,
.uc-appbar__user-btn:focus {
  background: var(--uc-surface-muted) !important;
  box-shadow: none !important;
  outline: none;
}

.uc-appbar__user-photo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.uc-appbar__user-fallback {
  display: none;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--uc-gradient-brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.uc-appbar__user-name {
  display: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--uc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

@media (min-width: 992px) {
  .uc-appbar__user-name {
    display: block;
  }
}

.uc-appbar__user-caret {
  display: none;
  font-size: 10px;
  color: var(--uc-text-muted);
  flex-shrink: 0;
}

@media (min-width: 992px) {
  .uc-appbar__user-caret {
    display: inline-block;
  }
}

/* Dropdown */

.uc-appbar__menu-dropdown.dropdown-menu {
  list-style: none !important;
  margin: 0.35rem 0 0 !important;
  padding: 0.35rem !important;
  min-width: 220px;
  border-radius: var(--uc-radius-md) !important;
  border: 1px solid var(--uc-border) !important;
  box-shadow: none !important;
}

.uc-appbar__menu-dropdown > li {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.uc-appbar__menu-dropdown > li::before {
  display: none !important;
  content: none !important;
}

.uc-appbar__menu-header {
  padding: 0.6rem 0.75rem 0.5rem !important;
  pointer-events: none;
}

.uc-appbar__menu-header strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--uc-text);
  margin-bottom: 0.1rem;
}

.uc-appbar__menu-dept {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--uc-text-muted);
  margin-bottom: 0.15rem;
}

.uc-appbar__menu-header small {
  display: block;
  font-size: 12px;
  color: var(--uc-text-muted);
  word-break: break-all;
}

.uc-appbar__menu-divider.divider {
  height: 1px;
  margin: 0.2rem 0.5rem !important;
  overflow: hidden;
  background: var(--uc-border) !important;
}

.uc-appbar__menu-dropdown .uc-appbar__menu-item {
  display: flex !important;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem !important;
  border-radius: var(--uc-radius-sm);
  font-size: 14px !important;
  font-weight: 500;
  color: var(--uc-text) !important;
  transition: background 0.1s ease;
}

.uc-appbar__menu-dropdown .uc-appbar__menu-item .fa {
  width: 1rem;
  text-align: center;
  color: var(--uc-text-muted);
  font-size: 14px;
}

.uc-appbar__menu-dropdown .uc-appbar__menu-item:hover,
.uc-appbar__menu-dropdown .uc-appbar__menu-item:focus {
  background: var(--uc-surface-muted) !important;
  color: var(--uc-text) !important;
}

.uc-appbar__menu-item--danger {
  color: var(--uc-danger) !important;
}

.uc-appbar__menu-item--danger .fa {
  color: var(--uc-danger);
}

.uc-appbar__menu-item--danger:hover {
  background: rgba(220, 38, 38, 0.06) !important;
}

/* Legacy Quirk floats */

.uc-appbar .header-right,
.uc-appbar .headermenu {
  float: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.uc-appbar .headermenu > li {
  float: none;
  list-style: none;
}

.mainpanel {
  padding-top: var(--uc-header-height) !important;
}

@media (min-width: 992px) {
  .uc-appbar__brand.logopanel {
    left: 0 !important;
  }

  .uc-appbar__menu.menutoggle {
    display: inline-flex;
  }

  .uc-appbar__leading {
    padding-left: 1.25rem;
  }
}

@media (max-width: 991px) {
  /* Brand is the top of the full-height mobile drawer (above app bar) */
  .headerpanel.uc-appbar .uc-appbar__brand.logopanel,
  .headerpanel .logopanel.uc-appbar__brand {
    position: fixed;
    top: 0;
    left: calc(-1 * var(--uc-sidebar-width, 252px));
    width: var(--uc-sidebar-width, 252px) !important;
    height: var(--uc-header-height, 60px) !important;
    flex: none;
    margin: 0;
    padding: 0 1rem !important;
    display: flex;
    align-items: center;
    background: transparent !important;
    background-color: transparent !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 2101;
    transition: left 0.2s ease;
  }

  body.uc-sidebar-mobile-open .headerpanel.uc-appbar .uc-appbar__brand.logopanel,
  body.uc-sidebar-mobile-open .headerpanel .logopanel.uc-appbar__brand {
    left: 0 !important;
    z-index: 2101;
  }

  /* Keep menu control usable above backdrop while drawer is open */
  body.uc-sidebar-mobile-open .uc-appbar__menu.menutoggle {
    position: relative;
    z-index: 2110;
  }

  .uc-appbar__brand-link {
    width: 100%;
    min-width: 0;
  }

  .uc-appbar__toolbar.headerbar {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: var(--uc-header-height, 60px);
    margin-left: 0 !important;
    padding-left: 0.75rem !important;
    box-sizing: border-box;
  }

  .uc-appbar__leading {
    padding-left: 0;
    margin-left: 0;
    gap: 0.75rem;
    align-items: center;
  }

  .uc-appbar__search.search-box {
    max-width: none;
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .uc-appbar__search-wrap {
    display: none;
  }

  .uc-appbar__toolbar.headerbar {
    padding: 0 0.625rem;
    gap: 0.5rem;
  }

  .uc-appbar__title {
    max-width: 8rem;
    font-size: 16px;
  }
}

/* ===== theme/sidebar.css ===== */
/* Sidebar — brand gradient navigation */

.leftpanel.uc-sidebar {
  width: var(--uc-sidebar-width) !important;
  top: var(--uc-header-height);
  background: transparent !important;
  background-color: transparent !important;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  overflow: hidden;
  box-shadow: none;
  font-family: var(--uc-font-family);
  z-index: 1990;
}

/* Decorative logo — full width; translateX shifts right without changing left/width clip math */
.uc-sidebar__watermark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12rem;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.uc-sidebar__watermark-img {
  position: absolute;
  top: 0;
  left: 29%;
  width: 125%;
  max-width: none;
  height: auto;
  transform: translateX(1.25rem);
  opacity: 0.32;
  filter: brightness(0) invert(1);
  user-select: none;
}

.uc-sidebar__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: calc(100vh - var(--uc-header-height));
  position: relative;
  z-index: 1;
}

/* —— Profile —— */
.uc-sidebar__user {
  flex-shrink: 0;
  padding: 12px;
}

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

.uc-sidebar__user-main:hover {
  background: var(--uc-sidebar-hover);
}

.uc-sidebar__user-link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.uc-sidebar__user-link:hover,
.uc-sidebar__user-link:focus {
  text-decoration: none;
  color: inherit;
}

.uc-sidebar__avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.uc-sidebar__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.08);
  display: block;
}

.uc-sidebar__avatar-status {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--uc-sidebar-green);
  border: 2px solid rgba(15, 23, 42, 0.85);
}

.uc-sidebar__user-meta {
  flex: 1;
  min-width: 0;
}

.uc-sidebar__user-name {
  margin: 0;
  font-size: var(--uc-font-size-sidebar-nav);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--uc-sidebar-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uc-sidebar__user-role {
  margin: 1px 0 0;
  font-size: var(--uc-font-size-sidebar-meta);
  line-height: 1.3;
  color: var(--uc-sidebar-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uc-sidebar__user-badge {
  display: none;
}

.uc-sidebar__user-toggle {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--uc-sidebar-text-muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.uc-sidebar__user-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--uc-sidebar-text);
}

.uc-sidebar__user-toggle .fa {
  font-size: var(--uc-font-size-sm);
  transition: transform 0.2s ease;
}

.uc-sidebar__user-toggle[aria-expanded="true"] .fa {
  transform: rotate(180deg);
}

.uc-sidebar__user-details {
  margin-top: 6px;
}

.uc-sidebar__details-list {
  margin: 0;
  padding: 10px 12px;
  background: var(--uc-sidebar-bg-elevated);
  border: 1px solid var(--uc-sidebar-border);
  border-radius: 7px;
  font-size: var(--uc-font-size-sidebar-meta);
}

.uc-sidebar__details-list > div + div {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--uc-sidebar-border);
}

.uc-sidebar__details-list dt {
  margin: 0;
  font-size: var(--uc-font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--uc-sidebar-text-muted);
}

.uc-sidebar__details-list dd {
  margin: 2px 0 0;
  font-size: var(--uc-font-size-sidebar-meta);
  color: var(--uc-sidebar-text-mid);
  word-break: break-word;
}

/* —— Navigation —— */
.uc-sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: 5px 0;
  scrollbar-width: none;
}

.uc-sidebar__nav::-webkit-scrollbar {
  display: none;
}

.uc-sidebar__section {
  margin-bottom: 2px;
}

.uc-sidebar__section + .uc-sidebar__section {
  margin-top: 3px;
}

.uc-sidebar__nav > .uc-sidebar__section:first-child .uc-sidebar__section-label {
  padding-top: 10px;
}

.uc-sidebar__section-label {
  margin: 0;
  padding: 8px 12px 4px;
  font-size: var(--uc-font-size-sidebar-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.uc-sidebar__links {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.uc-sidebar__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 1px 8px;
  padding: var(--uc-sidebar-link-py) var(--uc-sidebar-link-px);
  min-height: 34px;
  border: none;
  border-radius: var(--uc-radius-sm);
  text-align: left;
  text-decoration: none !important;
  color: var(--uc-sidebar-text-mid) !important;
  font-size: var(--uc-font-size-sidebar-nav);
  font-weight: 500;
  line-height: 1.2;
  text-shadow: none;
  transition: background 0.1s ease, color 0.1s ease;
}

.uc-sidebar__link:hover {
  background: var(--uc-sidebar-hover);
  color: #fff !important;
}

.uc-sidebar__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.uc-sidebar__icon .fa {
  text-align: center;
  transition: color 0.1s ease, transform 0.1s ease;
}

.uc-sidebar__link:hover .uc-sidebar__icon .fa {
  transform: scale(1.05);
}

.uc-sidebar__link--active {
  background: var(--uc-sidebar-active) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
  border: none !important;
}

.uc-sidebar__link--active::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 22px;
  background: #fff;
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}

.uc-sidebar__link--active .uc-sidebar__icon .fa {
  filter: none;
  opacity: 1;
}

a.uc-sidebar__link#dash,
a.uc-sidebar__link#quiz {
  background-image: none !important;
}

a.uc-sidebar__link#dash.uc-sidebar__link--active,
a.uc-sidebar__link#quiz.uc-sidebar__link--active {
  background: var(--uc-sidebar-active) !important;
  color: var(--uc-sidebar-text) !important;
}

.uc-sidebar__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uc-sidebar__badge {
  flex-shrink: 0;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--uc-radius-full, 999px);
  background: var(--uc-danger, #dc2626);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.35);
}

.uc-sidebar__badge[hidden],
.uc-sidebar__badge.uc-sidebar__badge--hidden {
  display: none !important;
}

.uc-sidebar__link--active .uc-sidebar__badge {
  background: var(--uc-danger, #dc2626);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

body.uc-sidebar-collapsed .uc-sidebar__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 0.95rem;
  height: 0.95rem;
  padding: 0 0.2rem;
  font-size: 9px;
}

/* Directory */
.uc-sidebar__section--directory {
  padding: 0;
  margin-top: 3px;
}

.uc-sidebar__section-toggle {
  position: relative;
  width: calc(100% - 20px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 2px 10px;
  padding: var(--uc-sidebar-link-py) var(--uc-sidebar-link-px);
  min-height: 42px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--uc-sidebar-text-mid);
  font-size: var(--uc-font-size-sidebar-nav);
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: background 0.1s ease, color 0.1s ease;
}

.uc-sidebar__section-toggle:hover {
  background: var(--uc-sidebar-hover);
  color: #fff;
}

.uc-sidebar__section-toggle-label {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.uc-sidebar__section-toggle-label .fa {
  width: var(--uc-sidebar-icon-size);
  text-align: center;
  font-size: 18px;
  /* inherits per-icon color from .uc-sidebar__icon .fa rules */
}

.uc-sidebar__section-chevron {
  font-size: var(--uc-font-size-xs);
  opacity: 0.5;
  margin-left: auto;
  transition: transform 0.2s ease;
}

.uc-sidebar__section-toggle[aria-expanded="true"] .uc-sidebar__section-chevron {
  transform: rotate(180deg);
}

.uc-sidebar__directory {
  margin: 2px 12px 6px;
  padding: 6px 10px 8px;
  background: var(--uc-sidebar-bg-elevated);
  border: 1px solid var(--uc-sidebar-border);
  border-radius: 7px;
  max-height: 240px;
  overflow-y: auto;
}

.uc-sidebar__directory-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.uc-sidebar__directory-heading {
  margin: 8px 0 3px;
  padding: 0;
  font-size: var(--uc-font-size-sidebar-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
}

.uc-sidebar__directory-heading:first-child {
  margin-top: 0;
}

.uc-sidebar__directory-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 4px;
  border-radius: 6px;
  font-size: var(--uc-font-size-sidebar-meta);
  transition: background 0.1s ease;
}

.uc-sidebar__directory-item:hover {
  background: var(--uc-sidebar-hover);
}

.uc-sidebar__directory-avatar {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(78, 142, 247, 0.18);
  color: var(--uc-sidebar-accent);
  font-size: var(--uc-font-size-xs);
}

.uc-sidebar__directory-avatar--dept {
  background: rgba(34, 200, 138, 0.16);
  color: var(--uc-sidebar-green);
}

.uc-sidebar__directory-info {
  flex: 1;
  min-width: 0;
}

.uc-sidebar__directory-info strong {
  display: block;
  font-size: var(--uc-font-size-sidebar-meta);
  font-weight: 500;
  color: var(--uc-sidebar-text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uc-sidebar__directory-info small {
  display: block;
  margin-top: 1px;
  font-size: var(--uc-font-size-xs);
  line-height: 1.3;
  color: var(--uc-sidebar-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uc-sidebar__directory-empty {
  padding: 5px 4px;
  font-size: var(--uc-font-size-sidebar-meta);
  color: var(--uc-sidebar-text-muted);
  font-style: italic;
}

/* Footer */
.uc-sidebar__footer {
  flex-shrink: 0;
  padding: 8px 12px 12px;
  border-top: 1px solid var(--uc-sidebar-border);
}

.uc-sidebar__logout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--uc-sidebar-link-py) var(--uc-sidebar-link-px);
  min-height: 42px;
  border-radius: 8px;
  font-size: var(--uc-font-size-sidebar-nav);
  font-weight: 600;
  color: var(--uc-sidebar-text-mid) !important;
  text-decoration: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: background 0.1s ease, color 0.1s ease;
}

.uc-sidebar__logout:hover {
  background: rgba(239, 68, 68, 0.10);
  color: #fca5a5 !important;
}

.uc-sidebar__logout .fa {
  width: var(--uc-sidebar-icon-size);
  text-align: center;
  font-size: 18px;
  color: inherit;
}

.uc-sidebar__version {
  margin: 8px 0 0;
  text-align: center;
  font-size: var(--uc-font-size-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.52);
}

/* Hide legacy markup */
.uc-sidebar .nav-quirk,
.uc-sidebar .nav-sidebar,
.uc-sidebar .leftpanel-profile,
.uc-sidebar .leftpanel-userinfo {
  display: none !important;
}

/* Collapsed sidebar (desktop) */
body.uc-sidebar-collapsed .uc-sidebar__section-label,
body.uc-sidebar-collapsed .uc-sidebar__text,
body.uc-sidebar-collapsed .uc-sidebar__user-meta,
body.uc-sidebar-collapsed .uc-sidebar__user-toggle,
body.uc-sidebar-collapsed .uc-sidebar__user-details,
body.uc-sidebar-collapsed .uc-sidebar__section--directory,
body.uc-sidebar-collapsed .uc-sidebar__version,
body.uc-sidebar-collapsed .uc-sidebar__logout span,
body.uc-sidebar-collapsed .uc-sidebar__watermark {
  display: none !important;
}

body.uc-sidebar-collapsed .uc-sidebar__user {
  padding: 8px 6px;
}

body.uc-sidebar-collapsed .uc-sidebar__user-main {
  justify-content: center;
  padding: 6px;
}

body.uc-sidebar-collapsed .uc-sidebar__link,
body.uc-sidebar-collapsed .uc-sidebar__logout {
  justify-content: center;
  margin-left: 6px;
  margin-right: 6px;
  padding-left: 0;
  padding-right: 0;
}

body.uc-sidebar-collapsed .uc-sidebar__link--active::before {
  left: -6px;
  height: 18px;
}

body.uc-sidebar-collapsed .leftpanel.uc-sidebar {
  transition: width 0.2s ease;
}

@media (max-width: 991px) {
  .leftpanel.uc-sidebar {
    left: calc(-1 * var(--uc-sidebar-width));
    top: 0;
    height: 100dvh;
  }

  body.uc-sidebar-mobile-open .leftpanel.uc-sidebar {
    z-index: 2100;
  }

  .uc-sidebar__inner {
    min-height: 100dvh;
    padding-top: var(--uc-header-height);
    box-sizing: border-box;
  }

  .uc-sidebar__user {
    padding: 10px 12px;
  }

  .uc-sidebar__user-main {
    align-items: center;
  }
}

/* ===== theme/components.css ===== */
/**
 * UCSSACCO — shared UI components (main content area)
 */

/* Page chrome */
.page-header {
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--uc-border);
}

.page-header h1 {
  margin: 0;
  font-size: var(--uc-font-size-xl) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--uc-text);
}

.breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: 0.75rem;
  font-size: var(--uc-font-size-sm);
}

.breadcrumb > li + li:before {
  color: var(--uc-text-muted);
}

/* Cards & dashboard tiles */
.dash_card,
.dash_card1,
.dash_card2,
.dash_card3,
.system-link {
  background: var(--uc-surface) !important;
  border: 1px solid var(--uc-border) !important;
  border-radius: var(--uc-radius-lg) !important;
  box-shadow: none !important;
}

.system-link:hover {
  transform: none;
  box-shadow: none !important;
}

.panel {
  border-radius: var(--uc-radius-lg);
  border-color: var(--uc-border);
  box-shadow: none;
}

.panel-heading {
  border-top-left-radius: var(--uc-radius-lg);
  border-top-right-radius: var(--uc-radius-lg);
}

/* Forms */
.form-control {
  border-radius: var(--uc-radius-sm) !important;
  border-color: var(--uc-border) !important;
  font-size: var(--uc-font-size-base);
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus {
  border-color: var(--uc-brand-400) !important;
  box-shadow: 0 0 0 3px var(--uc-focus-ring) !important;
}

.btn-primary {
  background: var(--uc-gradient-brand) !important;
  border: none !important;
  border-radius: var(--uc-radius-sm) !important;
  font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus {
  opacity: 0.92;
}

/* Tables */
.table {
  background: var(--uc-surface);
}

.table > thead > tr > th {
  border-bottom-color: var(--uc-border);
  color: var(--uc-text-muted);
  font-size: var(--uc-font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Loader */
#loader-wrapper {
  background: rgba(255, 255, 255, 0.85) !important;
}

#loader {
  border-color: var(--uc-brand-800) !important;
  border-top-color: #f1f5f9 !important;
}

/* Active nav legacy IDs from module pages */
#dash.uc-sidebar__link--active,
#quiz.uc-sidebar__link--active {
  /* handled in sidebar.css */
}

/* Main content typography */
body#body .contentpanel,
body#body .mainpanel .page-content {
  font-size: var(--uc-font-size-base);
}

body#body .contentpanel .table > tbody > tr > td {
  font-size: var(--uc-font-size-base);
}

body#body .btn,
body#body .btn-sm {
  font-size: var(--uc-font-size-base);
}

body#body .btn-lg {
  font-size: var(--uc-font-size-lg) !important;
}

/* Beat legacy module inline styles (12–14px) */
body#body .mainpanel h1 {
  font-size: var(--uc-font-size-xl) !important;
}

body#body .mainpanel h2 {
  font-size: var(--uc-font-size-lg) !important;
}

body#body .mainpanel h3,
body#body .mainpanel h4 {
  font-size: var(--uc-font-size-base) !important;
}

body#body .mainpanel p,
body#body .mainpanel li,
body#body .mainpanel label,
body#body .mainpanel .breadcrumb,
body#body .mainpanel .breadcrumb > li,
body#body .mainpanel .breadcrumb li,
body#body .mainpanel .event-details,
body#body .mainpanel .table > tbody > tr > td,
body#body .mainpanel .table > thead > tr > th,
body#body .mainpanel .dataTables_wrapper {
  font-size: var(--uc-font-size-base) !important;
}

body#body .mainpanel .badge {
  font-size: var(--uc-font-size-sm) !important;
}

/* Modals — above shell (2100), daily planner (2200), and chat (10000) */
.modal-backdrop {
  z-index: 10050 !important;
}

.modal {
  z-index: 10060 !important;
}

body.modal-open .modal.in {
  display: block !important;
  opacity: 1;
}

.modal.in .modal-dialog {
  transform: translate(0, 0);
}

.modal-content {
  box-shadow: none !important;
  border: 1px solid var(--uc-border);
  border-radius: var(--uc-radius-lg);
}

.dropdown-menu {
  box-shadow: none !important;
  border: 1px solid var(--uc-border);
}

/* ===== theme/home.css ===== */
/* Dashboard (home) — works with Bootstrap 3 grid */

.uc-home {
  width: 100%;
}

.uc-home__header {
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding-top: 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--uc-border);
}

.uc-home__header h1 {
  margin: 0 0 0.35rem;
}

.uc-home__lead {
  margin: 0;
  font-size: var(--uc-font-size-base);
}

/* Five equal columns in one row on large screens (12 ÷ 5) */
@media (min-width: 1200px) {
  .uc-home__row {
    display: flex;
    flex-wrap: nowrap;
    margin-left: -10px;
    margin-right: -10px;
  }

  .uc-home__row::before,
  .uc-home__row::after {
    display: none;
  }

  .uc-home__col {
    float: none;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Vertical rhythm between module cards when the grid wraps (tablet / mobile) */
@media (max-width: 1199px) {
  .uc-home__col {
    margin-bottom: 1rem;
  }
}

@media (max-width: 575px) {
  .uc-home__col {
    margin-bottom: 0.875rem;
  }
}

.uc-home__card.thumbnail {
  position: relative;
  display: block;
  margin-bottom: 0;
  padding: 1.25rem 0.75rem;
  text-decoration: none !important;
  color: var(--uc-text) !important;
  background: var(--uc-surface) !important;
  border: 1px solid var(--uc-border) !important;
  border-radius: var(--uc-radius-lg) !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.uc-home__card.thumbnail:hover,
.uc-home__card.thumbnail:focus {
  border-color: var(--uc-brand-400) !important;
  transform: translateY(-2px);
  color: var(--uc-text) !important;
}

.uc-home__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 0.75rem;
  border-radius: var(--uc-radius-md);
  background: var(--uc-surface-muted);
}

.uc-home__card-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.uc-home__card-title {
  margin: 0 0 0.25rem;
  font-size: var(--uc-font-size-base) !important;
  font-weight: 600;
  color: var(--uc-text);
}

.uc-home__card-desc {
  margin: 0;
  font-size: var(--uc-font-size-sm) !important;
}

.uc-home__card-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  padding: 0.2rem 0.45rem;
  border-radius: var(--uc-radius-full);
  background: var(--uc-brand-600, #213a7b);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(33, 58, 123, 0.25);
}

.uc-home__below {
  margin-top: 2rem;
}

.uc-home__stats {
  margin-bottom: 1.25rem;
}

.uc-home__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  margin-bottom: 1rem;
  padding: 1rem 1.15rem;
  background: var(--uc-surface) !important;
  border: 1px solid var(--uc-border) !important;
  border-radius: var(--uc-radius-md) !important;
}

.uc-home__stat-value {
  font-size: var(--uc-font-size-xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--uc-brand-600);
}

.uc-home__stat-label {
  font-size: var(--uc-font-size-sm);
  font-weight: 500;
  color: var(--uc-text-muted);
}

.uc-home__panels {
  margin-bottom: 0.5rem;
}

.uc-home__panel {
  margin-bottom: 1.25rem;
  padding: 1.15rem 1.25rem 1rem;
  background: var(--uc-surface) !important;
  border: 1px solid var(--uc-border) !important;
  border-radius: var(--uc-radius-lg) !important;
}

.uc-home__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--uc-border);
}

.uc-home__panel-title {
  margin: 0;
  font-size: var(--uc-font-size-base) !important;
  font-weight: 600;
  color: var(--uc-text);
}

.uc-home__panel-title .fa {
  margin-right: 0.45rem;
  color: var(--uc-brand-400);
}

.uc-home__panel-link {
  flex-shrink: 0;
  font-size: var(--uc-font-size-sm);
  font-weight: 500;
  color: var(--uc-brand-400) !important;
  text-decoration: none !important;
}

.uc-home__panel-link:hover,
.uc-home__panel-link:focus {
  text-decoration: underline !important;
  color: var(--uc-brand-600) !important;
}

.uc-home__empty {
  margin: 0;
  padding: 0.5rem 0;
  font-size: var(--uc-font-size-sm);
  color: var(--uc-text-muted);
}

.uc-home__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.uc-home__list-item + .uc-home__list-item {
  border-top: 1px solid var(--uc-border);
}

.uc-home__list-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0;
  text-decoration: none !important;
  color: var(--uc-text) !important;
  transition: color 0.12s ease;
}

.uc-home__list-link:hover,
.uc-home__list-link:focus {
  color: var(--uc-brand-600) !important;
}

.uc-home__list-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.uc-home__list-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--uc-radius-sm);
  background: var(--uc-surface-muted);
  color: var(--uc-brand-400);
  font-size: var(--uc-font-size-sm);
}

.uc-home__list-body {
  flex: 1;
  min-width: 0;
}

.uc-home__list-body strong {
  display: block;
  font-size: var(--uc-font-size-sm);
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uc-home__list-body small {
  display: block;
  margin-top: 0.1rem;
  font-size: var(--uc-font-size-xs);
  color: var(--uc-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uc-home__quick-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.uc-home__quick-links li + li {
  border-top: 1px solid var(--uc-border);
}

.uc-home__quick-links a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0;
  font-size: var(--uc-font-size-sm);
  font-weight: 500;
  color: var(--uc-text) !important;
  text-decoration: none !important;
}

.uc-home__quick-links a:hover,
.uc-home__quick-links a:focus {
  color: var(--uc-brand-600) !important;
}

.uc-home__quick-links .fa {
  width: 18px;
  text-align: center;
  color: var(--uc-brand-400);
}

.uc-home__dept {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--uc-border);
}

.uc-home__dept-label {
  display: block;
  margin-bottom: 0.2rem;
  font-size: var(--uc-font-size-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--uc-text-muted);
}

.uc-home__dept strong {
  display: block;
  font-size: var(--uc-font-size-base);
  color: var(--uc-text);
}

.uc-home__dept-role {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--uc-font-size-sm);
  color: var(--uc-text-muted);
}

/* ===== theme/tasks.css ===== */
/* Task Management — compact dashboard, lists, tables */

.uc-tasks {
  --tm-border: var(--uc-border);
  --tm-border-hover: #e0edff;
  --tm-table-border: #e8eef6;
  --tm-hover-bg: #f8fafc;
  --tm-hover-bg-accent: #f8fbff;
  --tm-transition-hover: border-color 0.25s ease, background-color 0.25s ease;
  width: 100%;
}

.lh-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 0.35rem 0 0.25rem;
  background: transparent;
  border: none;
  border-radius: 0;
}

.lh-topbar + .tm-dash {
  margin-top: 0;
}

.lh-topbar__left {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.lh-topbar__label {
  font-size: var(--uc-font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--uc-brand-600);
}

.lh-topbar__name {
  margin: 0;
  font-size: var(--uc-font-size-xl);
  font-weight: 600;
  color: var(--uc-text);
  line-height: 1.25;
}

.lh-topbar__sub {
  margin: 0;
  font-size: var(--uc-font-size-sm);
  color: var(--uc-text-muted);
}

.lh-topbar__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  background: var(--uc-brand-600);
  color: #fff;
  border: none;
  border-radius: var(--uc-radius-sm);
  font-size: var(--uc-font-size-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.lh-topbar__cta:hover {
  background: var(--uc-brand-700);
  color: #fff;
  text-decoration: none;
}

.lh-topbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  flex-shrink: 0;
}

.lh-topbar__cta--muted {
  background: var(--uc-surface);
  color: var(--uc-text);
  border: 1px solid var(--tm-border);
}

.lh-topbar__cta--muted:hover {
  background: var(--uc-surface-muted);
  color: var(--uc-text);
}

.lh-topbar__cta--success {
  background: #ecfdf5;
  color: var(--uc-success);
  border: 1px solid #a7f3d0;
}

.lh-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-bottom: 1rem;
}

@media (max-width: 991px) {
  .lh-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
  .lh-stats { grid-template-columns: 1fr 1fr; }
}

.lh-stat {
  background: var(--uc-surface);
  border: 1px solid var(--tm-border);
  border-radius: var(--uc-radius-md);
  text-decoration: none;
}

.lh-stat:hover {
  border-color: var(--tm-border-hover);
  transition: var(--tm-transition-hover);
}

.lh-stat__inner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.75rem;
}

.lh-stat__icon {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.lh-stat__body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.lh-stat__num {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  color: var(--uc-text);
}

.lh-stat__label {
  font-size: var(--uc-font-size-xs);
  font-weight: 500;
  color: var(--uc-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lh-stat--pending  .lh-stat__icon { color: #b45309; }
.lh-stat--approved .lh-stat__icon { color: #047857; }
.lh-stat--declined .lh-stat__icon { color: #b91c1c; }
.lh-stat--balance  .lh-stat__icon { color: var(--uc-brand-600); }
.lh-stat--info     .lh-stat__icon { color: var(--uc-brand-600); }

.lh-card {
  background: var(--uc-surface);
  border: 1px solid var(--tm-border);
  border-radius: var(--uc-radius-lg);
  overflow: hidden;
  margin-bottom: 1rem;
}

.lh-card:empty,
.lh-card .lh-card__body:empty {
  display: none;
}

.lh-card__top {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--tm-border);
  background: var(--uc-surface);
}

.lh-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.lh-card__title {
  font-size: var(--uc-font-size-sm);
  font-weight: 600;
  color: var(--uc-text);
  margin: 0;
}

.lh-card__body {
  padding: 0.85rem 1rem;
}

/* Task grid */
.uc-tasks #task-container:not(.tm-project-grid):not(.tm-project-list-host),
.uc-tasks #upcoming_meetings,
.uc-tasks #thisMonthEvents,
.uc-tasks .tm-task-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
  margin: 0;
}

.uc-tasks #task-container.tm-project-grid,
.uc-tasks #task-container.tm-project-list-host,
.uc-tasks .tm-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.85rem;
  margin: 0;
  align-content: start;
}

.uc-tasks #task-container.tm-project-list-host {
  display: block;
  width: 100%;
}

.uc-tasks #task-container.tm-project-list-host .tm-project-list {
  width: 100%;
}

.uc-tasks .tm-project-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.9rem 1rem;
  background: var(--uc-surface);
  border: 1px solid var(--tm-border);
  border-radius: var(--uc-radius-lg);
  transition: var(--tm-transition-hover);
  box-shadow: none !important;
}

.uc-tasks .tm-project-card:hover {
  border-color: var(--tm-border-hover);
  background: var(--tm-hover-bg-accent);
}

.tm-project-card--skeleton {
  min-height: 168px;
  gap: 0.5rem;
}

.tm-project-card--skeleton .skeleton-panel {
  height: 12px;
  border-radius: 4px;
}

.tm-project-card--skeleton .skeleton-panel:first-child {
  height: 18px;
  width: 65%;
}

.tm-project-card__head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.tm-project-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
}

.tm-project-card__title-wrap {
  flex: 1;
  min-width: 0;
}

.tm-project-card__title {
  margin: 0 0 0.2rem;
  font-size: var(--uc-font-size-base);
  font-weight: 600;
  color: var(--uc-text);
  line-height: 1.35;
  word-break: break-word;
}

.tm-project-card__meta {
  margin: 0;
  font-size: var(--uc-font-size-xs);
  color: var(--uc-text-muted);
  line-height: 1.4;
}

.tm-project-card__head .tm-task-card__due {
  margin-top: 0.1rem;
}

.tm-project-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tm-project-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--uc-radius-full);
  font-size: 11px;
  font-weight: 600;
  color: var(--uc-text-muted);
  background: var(--uc-surface-muted);
  border: 1px solid var(--tm-border);
}

.tm-project-card__chip .fa-tasks { color: #2563eb; }
.tm-project-card__chip .fa-check-circle { color: #059669; }
.tm-project-card__chip .fa-clock-o { color: #d97706; }

.tm-project-card__chip--warn {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.tm-project-card__progress-block {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.tm-project-card__progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.tm-project-card__progress-label {
  margin: 0;
  font-size: var(--uc-font-size-xs);
  color: var(--uc-text-muted);
  font-weight: 500;
}

.tm-project-card__progress-value {
  font-size: var(--uc-font-size-sm);
  font-weight: 700;
  color: var(--uc-brand-700);
}

.tm-project-card .tm-task-card__progress {
  height: 6px;
}

.tm-project-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.35rem;
}

.tm-project-card__actions .uc-tasks__btn--primary {
  flex: 1 1 auto;
  justify-content: center;
}

.tm-project-card__actions .uc-tasks__btn--danger {
  margin-left: auto;
}

/* Legacy stats row — keep for dept cards if used */
.tm-project-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  font-size: var(--uc-font-size-xs);
  color: var(--uc-text-muted);
}

.tm-project-card__stats i {
  margin-right: 0.2rem;
}

.tm-project-card__stats .fa-tasks { color: #2563eb; }
.tm-project-card__stats .fa-check { color: #059669; }

.tm-project-card .tm-task-card__progress-label {
  margin: 0.1rem 0 0;
}

/* Project detail */
.tm-project-detail {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.tm-project-detail__hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--tm-border);
  border-radius: var(--uc-radius-lg);
  background: linear-gradient(135deg, var(--uc-brand-50) 0%, var(--uc-surface) 46%);
}

.tm-project-detail__banner {
  display: none;
}

.tm-project-detail__hero-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.15rem 1.1rem;
}

.tm-project-detail__hero-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
}

.tm-project-detail__identity {
  flex: 1;
  min-width: min(100%, 16rem);
}

.tm-project-detail__identity-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tm-project-detail__identity-row .tm-project-card__icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
}

.tm-project-detail__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--uc-text);
  line-height: 1.25;
  letter-spacing: -0.02em;
  word-break: break-word;
}

.tm-project-detail__lead {
  margin: 0.2rem 0 0;
  font-size: var(--uc-font-size-sm);
  color: var(--uc-text-muted);
}

.tm-project-detail__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.6rem;
}

.tm-project-detail__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.55rem;
  border: 1px solid var(--tm-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 600;
  color: var(--uc-text-muted);
}

.tm-project-detail__chip .fa {
  color: var(--uc-brand-500);
  font-size: 10px;
}

.tm-project-detail__team {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

.tm-project-detail__team-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--uc-text-muted);
}

.tm-project-detail__score {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  min-width: 7.5rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--uc-brand-100);
  border-radius: var(--uc-radius-md);
  background: rgba(255, 255, 255, 0.82);
  text-align: right;
}

.tm-project-detail__score-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--uc-text-muted);
}

.tm-project-detail__score-value {
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--uc-brand-700);
  letter-spacing: -0.03em;
}

.tm-project-detail__score-meta {
  font-size: 11px;
  color: var(--uc-text-muted);
}

.tm-project-detail__description {
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--tm-border);
  border-radius: var(--uc-radius-md);
  background: rgba(255, 255, 255, 0.65);
  font-size: var(--uc-font-size-sm);
  color: var(--uc-text);
  line-height: 1.55;
}

.tm-project-detail__description p:last-child {
  margin-bottom: 0;
}

.tm-project-detail__progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--uc-text-muted);
}

.tm-project-detail__stats {
  margin: 0;
}

.tm-project-detail__stats .tm-dash__stat {
  width: 100%;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.tm-project-detail__stats button.tm-dash__stat.is-active {
  border-color: var(--tm-border-hover);
  background: var(--uc-surface-muted);
}

.tm-project-detail__stats .tm-dash__stat--blue.is-active {
  border-color: #dbeafe;
  background: #f5f9ff;
}

.tm-project-detail__stats .tm-dash__stat--amber.is-active {
  border-color: #fdecc8;
  background: #fffdf5;
}

.tm-project-detail__stats .tm-dash__stat--green.is-active {
  border-color: #d1fae5;
  background: #f6fef9;
}

.tm-project-detail__stats .tm-dash__stat--slate.is-active {
  border-color: #e2e8f0;
  background: #f8fafc;
}

.tm-project-detail__tasks-panel .tm-filter-panel__body {
  padding: 0;
}

.tm-project-detail__tasks-board .tm-project-task-board {
  border: 1px solid var(--tm-border);
  border-radius: var(--uc-radius-lg);
  overflow: hidden;
  background: var(--uc-surface);
}

.tm-project-detail__tasks-empty {
  text-align: center;
  color: var(--uc-text-muted);
  padding: 1.5rem 1rem;
  margin: 0;
}

.tm-project-task-board {
  width: 100%;
}

.tm-project-task-board__head,
.tm-project-task-board__row {
  display: grid;
  grid-template-columns: minmax(11rem, 1.1fr) minmax(0, 1.6fr) 6.5rem 7.5rem;
  gap: 0.75rem 1rem;
  align-items: center;
}

.tm-project-task-board__head {
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--tm-border);
  background: var(--uc-surface-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--uc-text-muted);
}

.tm-project-task-board__row {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--tm-border);
  background: var(--uc-surface);
  transition: background 0.12s ease;
}

.tm-project-task-board__row:last-child {
  border-bottom: none;
}

.tm-project-task-board__row:hover {
  background: var(--tm-hover-bg-accent);
}

.tm-project-task-board__person {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.tm-project-task-board__person-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.tm-project-task-board__assignee {
  font-size: var(--uc-font-size-sm);
  font-weight: 700;
  color: var(--uc-text);
  line-height: 1.25;
  word-break: break-word;
}

.tm-project-task-board__assigner {
  font-size: 11px;
  color: var(--uc-text-muted);
}

.tm-project-task-board__title {
  font-size: var(--uc-font-size-sm);
  font-weight: 600;
  color: var(--uc-text);
  line-height: 1.4;
  word-break: break-word;
}

.tm-project-task-board__due {
  font-size: var(--uc-font-size-xs);
  font-weight: 600;
  color: var(--uc-text-muted);
  white-space: nowrap;
}

.tm-project-task-board__status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.tm-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.tm-user-avatar--sm {
  width: 1.65rem;
  height: 1.65rem;
  font-size: 9px;
}

.tm-user-avatar--md {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 11px;
}

.tm-user-avatar--blue { background: #2563eb; }
.tm-user-avatar--violet { background: #7c3aed; }
.tm-user-avatar--teal { background: #0d9488; }
.tm-user-avatar--amber { background: #d97706; }
.tm-user-avatar--rose { background: #e11d48; }
.tm-user-avatar--slate { background: #475569; }

.tm-project-card__team {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.tm-project-card__team-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--uc-text-muted);
}

.tm-project-card__team-people {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
}

.tm-project-card__team-person {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 11px;
  font-weight: 600;
  color: var(--uc-text);
}

.tm-project-card__team-empty {
  font-size: 11px;
  color: var(--uc-text-muted);
}

.tm-project-detail__tasks-context {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.65rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--tm-border);
  border-radius: var(--uc-radius-md);
  background: var(--uc-surface-muted);
  font-size: var(--uc-font-size-sm);
  color: var(--uc-text-muted);
}

.tm-project-detail__tasks-context .fa {
  color: var(--uc-brand-500);
}

@media (max-width: 575px) {
  .tm-project-detail__score {
    align-items: flex-start;
    text-align: left;
    width: 100%;
  }
}

.uc-tasks #task-container > .tm-empty,
.uc-tasks .tm-project-grid > .tm-empty {
  grid-column: 1 / -1;
  max-width: none;
}

body > form[id^="taskForm"]:empty {
  display: none;
}

.modal.fade:not(.in) {
  display: none !important;
}

body > .modal.fade:not(.in) {
  display: none !important;
}

.uc-tasks #task-container > form[id^="subForm"],
.uc-tasks #task-container > .modal:not(.in),
.uc-tasks #task-container > script {
  display: none;
}

.uc-tasks #task-container > .row {
  display: contents;
}

.uc-tasks #task-container .col-sm-3,
.uc-tasks #task-container .col-sm-4,
.uc-tasks #task-container .col-md-3,
.uc-tasks #task-container .col-md-4 {
  width: 100%;
  max-width: none;
}

.uc-tasks .timeline-box,
.uc-tasks .event-card,
.uc-tasks .tm-task-card {
  background: var(--uc-surface);
  border: 1px solid var(--tm-border);
  border-radius: var(--uc-radius-md);
  padding: 0.85rem;
  margin: 0;
  height: 100%;
  cursor: pointer;
  transition: var(--tm-transition-hover);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.uc-tasks .timeline-box[style*="border-left: solid red"],
.uc-tasks .timeline-box.tm-task--rejected,
.tm-task-card--rejected {
  border-color: #fecaca;
  background: #fffbfb;
}

.uc-tasks .timeline-box:hover,
.uc-tasks .event-card:hover,
.uc-tasks .tm-task-card:hover {
  border-color: var(--uc-brand-100);
  background: var(--tm-hover-bg-accent);
}

.tm-task-card.is-expanded {
  border-color: var(--uc-brand-100);
  background: var(--uc-brand-50);
}

.uc-tasks .box-title {
  flex: 1;
  min-width: 0;
  font-size: var(--uc-font-size-sm);
  font-weight: 600;
  color: var(--uc-text);
  margin: 0;
  padding: 0;
  border: none;
}

.tm-task-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.tm-task-card__chevron {
  flex-shrink: 0;
  color: var(--uc-text-muted);
  font-size: 11px;
  line-height: 1;
  margin-top: 0.15rem;
  transition: transform 0.18s ease, color 0.15s ease;
}

.tm-task-card.is-expanded .tm-task-card__chevron {
  transform: rotate(180deg);
  color: var(--uc-brand-600);
}

.tm-task-card__head .box-title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.uc-tasks .box-title i {
  color: var(--uc-brand-600);
  margin-right: 0.3rem;
  font-size: 12px;
}

.tm-task-card__meta {
  margin: 0;
  font-size: var(--uc-font-size-xs);
  color: var(--uc-text-muted);
  line-height: 1.4;
}

.tm-task-card__due {
  flex-shrink: 0;
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: var(--uc-radius-full);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.3;
}

.tm-task-card__due--ok { background: #ecfdf5; color: #047857; }
.tm-task-card__due--warn { background: #fffbeb; color: #b45309; }
.tm-task-card__due--danger { background: #fef2f2; color: #b91c1c; }

.tm-task-card--rejected {
  border-color: #fecaca;
}

.tm-task-card > .box-content,
.tm-task-card .box-content {
  display: none;
  margin-top: 0.15rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--tm-border);
}

.tm-task-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--tm-border);
}

.tm-task-card__done-btn {
  background: var(--uc-brand-600) !important;
  color: #fff !important;
  border: none !important;
  padding: 0.3rem 0.65rem !important;
  font-size: 11px !important;
  font-weight: 600;
  height: auto !important;
  width: auto !important;
}

.tm-task-card__progress-label {
  margin: 0.35rem 0 0.25rem;
  font-size: var(--uc-font-size-xs);
  color: var(--uc-text-muted);
}

.tm-task-card__progress-label strong {
  color: var(--uc-text);
  font-weight: 600;
}

.tm-task-card__progress {
  width: 100%;
  height: 4px;
  background: var(--uc-surface-muted);
  border-radius: var(--uc-radius-full);
  overflow: hidden;
}

.tm-task-card__progress-bar {
  height: 100%;
  background: var(--uc-brand-600);
  border-radius: var(--uc-radius-full);
  min-width: 0;
  transition: width 0.2s ease;
}

.uc-tasks .box-content {
  font-size: var(--uc-font-size-sm);
  padding-top: 0.35rem;
  border-top: 1px dashed var(--tm-border);
}

.uc-tasks .box-item {
  font-size: var(--uc-font-size-xs);
  color: var(--uc-text-muted);
  margin-bottom: 0.35rem;
  line-height: 1.45;
}

.uc-tasks .box-item strong {
  color: var(--uc-text);
  font-weight: 600;
}

.uc-tasks .skeleton-loader {
  background: var(--uc-surface);
  border: 1px solid var(--tm-border);
  border-radius: var(--uc-radius-md);
  padding: 0.75rem;
  height: auto !important;
  min-height: 140px;
}

.uc-tasks .skeleton-loader .skeleton-panel {
  background: linear-gradient(90deg, #f1f5f9 25%, #f8fafc 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: tm-shimmer 1.2s infinite;
  border-radius: var(--uc-radius-sm);
  height: 12px !important;
  margin-bottom: 8px;
}

@keyframes tm-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.uc-tasks__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--tm-table-border);
  border-radius: var(--uc-radius-md);
  background: var(--uc-surface);
}

.tm-content-panel .tm-filter-panel__body > .uc-tasks__table-wrap {
  margin: 0;
  padding: 0;
}

.tm-content-panel .tm-filter-panel__body > .tm-team__note,
.tm-content-panel .tm-filter-panel__body > .tm-dept-page__note {
  margin: 0.85rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--tm-border);
}

.tm-content-panel .uc-tasks__table-wrap .dataTables_wrapper {
  padding: 0;
}

.uc-tasks__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--uc-font-size-sm);
}

.uc-tasks__table th {
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-size: var(--uc-font-size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--uc-text-muted);
  background: var(--uc-surface-muted);
  border-bottom: 1px solid var(--tm-table-border);
}

.uc-tasks__table td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--tm-table-border);
  vertical-align: middle;
}

.uc-tasks__table tbody tr:last-child td {
  border-bottom: none;
}

.uc-tasks__table tbody tr:hover td {
  background: rgba(37, 99, 235, 0.04);
}

.uc-tasks__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: var(--uc-radius-full);
  font-size: var(--uc-font-size-xs);
  font-weight: 600;
}

.uc-tasks__badge--active { background: #ecfdf5; color: #047857; }
.uc-tasks__badge--progress { background: #eff6ff; color: #1d4ed8; }
.uc-tasks__badge--pending { background: #fffbeb; color: #b45309; }
.uc-tasks__badge--inactive { background: #fef2f2; color: #b91c1c; }

.uc-tasks__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.uc-tasks__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  border: none;
  border-radius: var(--uc-radius-sm);
  font-size: var(--uc-font-size-xs);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.uc-tasks__btn--primary { background: var(--uc-brand-600); color: #fff; }
.uc-tasks__btn--muted { background: var(--uc-surface-muted); color: var(--uc-text); border: 1px solid var(--tm-border); }
.uc-tasks__btn--ghost { background: transparent; color: var(--uc-text-muted); border: 1px solid var(--tm-border); }
.uc-tasks__btn--ghost:hover { background: var(--uc-surface-muted); color: var(--uc-text); }
.uc-tasks__btn--danger { background: #fef2f2; color: #b91c1c; }
.uc-tasks__btn--success { background: #ecfdf5; color: #047857; }

.uc-tasks__empty,
.tm-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: var(--uc-surface);
  border: 1px solid var(--tm-border);
  border-radius: var(--uc-radius-lg);
}

.tm-empty--compact {
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 0.85rem;
  padding: 1rem;
  background: var(--uc-surface);
  border: 1px dashed var(--tm-border);
  border-radius: var(--uc-radius-md);
}

.tm-empty--compact .tm-empty__icon {
  margin-bottom: 0;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.tm-empty--compact .tm-empty__body {
  flex: 1;
  min-width: 0;
}

.tm-empty--compact .tm-empty__title {
  font-size: var(--uc-font-size-sm);
  margin-bottom: 0.2rem;
}

.tm-empty--compact .tm-empty__text {
  margin-bottom: 0.65rem;
  font-size: var(--uc-font-size-xs);
}

.tm-empty--compact .tm-empty__cta {
  padding: 0.3rem 0.75rem;
  font-size: var(--uc-font-size-xs);
}

.tm-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
}

.tm-empty__title {
  margin: 0 0 0.35rem;
  font-size: var(--uc-font-size-lg);
  font-weight: 600;
  color: var(--uc-text);
}

.tm-empty__text {
  margin: 0 0 1rem;
  max-width: 28rem;
  font-size: var(--uc-font-size-sm);
  color: var(--uc-text-muted);
  line-height: 1.5;
}

.tm-empty__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  background: var(--uc-brand-600);
  color: #fff;
  border: none;
  border-radius: var(--uc-radius-sm);
  font-size: var(--uc-font-size-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.tm-empty__cta:hover {
  background: var(--uc-brand-700);
  color: #fff;
  text-decoration: none;
}

.tm-dash .tm-empty--compact {
  background: var(--uc-surface);
  border: 1px dashed var(--tm-border);
  border-radius: var(--uc-radius-md);
  padding: 1rem;
  margin: 0;
}

.tm-empty--panel {
  grid-column: auto;
}

.uc-tasks__footer-note {
  margin-top: 0.75rem;
  font-size: var(--uc-font-size-xs);
  color: var(--uc-text-muted);
  text-align: center;
}

.uc-tasks .page-header,
.uc-tasks .breadcrumbs {
  display: none !important;
}

.uc-tasks .panel,
.uc-tasks .card,
.uc-tasks .dash_card,
.uc-tasks .dash_card1,
.uc-tasks .dash_card2,
.uc-tasks .dash_card3 {
  background: var(--uc-surface);
  border: 1px solid var(--tm-border);
  border-radius: var(--uc-radius-md);
}

.uc-tasks .panel-heading,
.uc-tasks .card-header {
  background: var(--uc-surface-muted);
  border-bottom: 1px solid var(--tm-border);
  padding: 0.5rem 0.75rem;
  font-size: var(--uc-font-size-sm);
}

.uc-tasks .form-control {
  border-color: var(--tm-border);
  border-radius: var(--uc-radius-sm);
  box-shadow: none;
  font-size: var(--uc-font-size-sm);
  height: auto;
  padding: 0.4rem 0.6rem;
}

.uc-tasks .form-control:focus {
  border-color: var(--uc-brand-500);
  box-shadow: 0 0 0 2px var(--uc-focus-ring);
}

.uc-tasks .btn-primary,
.uc-tasks .expand-button {
  background: var(--uc-brand-600);
  border-color: var(--uc-brand-600);
  color: #fff;
  font-size: var(--uc-font-size-sm);
  font-weight: 600;
  border-radius: var(--uc-radius-sm);
}

.uc-tasks .btn-primary:hover {
  background: var(--uc-brand-700);
  border-color: var(--uc-brand-700);
}

.uc-tasks .table thead th,
.uc-tasks table.dataTable thead th {
  background: var(--uc-surface-muted);
  color: var(--uc-text-muted);
  font-size: var(--uc-font-size-xs);
  font-weight: 600;
  border-bottom: 1px solid var(--tm-border);
}

.uc-tasks .chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (max-width: 991px) {
  .uc-tasks .chart-grid { grid-template-columns: 1fr; }
}

.uc-tasks .chart-card {
  background: var(--uc-surface-muted);
  border: 1px solid var(--tm-border);
  border-radius: var(--uc-radius-md);
  padding: 0.75rem;
}

.uc-tasks .chart-card h4 {
  margin: 0 0 0.2rem;
  font-size: var(--uc-font-size-sm);
  font-weight: 600;
}

.uc-tasks .chart-card p {
  margin: 0 0 0.65rem;
  font-size: var(--uc-font-size-xs);
  color: var(--uc-text-muted);
}

.uc-tasks .flot-chart {
  height: 200px !important;
}

#loader-wrapper,
.loader-wrapper {
  background: rgba(241, 245, 249, 0.85);
}

#loader,
.loader-wrapper #loader {
  border-color: var(--uc-brand-600);
  border-top-color: transparent;
  width: 32px;
  height: 32px;
}

.uc-tasks .modall {
  border-radius: var(--uc-radius-lg);
  border: 1px solid var(--tm-border);
}

.uc-tasks .leave-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.75rem;
}

.uc-tasks .leave-tabs .btn {
  border-radius: var(--uc-radius-full);
  font-size: var(--uc-font-size-xs);
  font-weight: 600;
  padding: 0.25rem 0.65rem;
}

/* —— Dashboard —— */
.tm-dash {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tm-dash__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
}

.uc-tasks > .tm-dash__stats {
  margin-bottom: 1.25rem;
}

@media (max-width: 767px) {
  .tm-dash__stats { grid-template-columns: repeat(2, 1fr); }
}

.tm-dash__stat {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--uc-surface);
  border: 1px solid var(--tm-border);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: var(--tm-transition-hover);
  box-shadow: none !important;
}

a.tm-dash__stat:hover {
  border-color: var(--uc-brand-100);
  text-decoration: none;
  color: inherit;
}

.tm-dash__stat--blue { background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%); border-color: #e0edff; }
.tm-dash__stat--amber { background: linear-gradient(135deg, #ffffff 0%, #fffdf7 100%); border-color: #fdecc8; }
.tm-dash__stat--green { background: linear-gradient(135deg, #ffffff 0%, #f7fefb 100%); border-color: #d1fae5; }
.tm-dash__stat--slate { background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%); border-color: #e8edf3; }

a.tm-dash__stat--blue:hover { border-color: #c7dcff; background: #f3f8ff; }
a.tm-dash__stat--amber:hover { border-color: #fcd9a0; background: #fff9ef; }
a.tm-dash__stat--green:hover { border-color: #a7f3d0; background: #f0fdf7; }
a.tm-dash__stat--slate:hover { border-color: #d8e0ea; background: #f5f7fa; }

.tm-dash__stat-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.tm-dash__stat--blue .tm-dash__stat-icon { color: #2563eb; }
.tm-dash__stat--amber .tm-dash__stat-icon { color: #b45309; }
.tm-dash__stat--green .tm-dash__stat-icon { color: #047857; }
.tm-dash__stat--slate .tm-dash__stat-icon { color: #475569; }

.tm-dash__stat-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.tm-dash__stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--uc-text);
  letter-spacing: -0.02em;
}

.tm-dash__stat-label {
  font-size: var(--uc-font-size-xs);
  color: var(--uc-text-muted);
}

.tm-dash__stat-hint {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--uc-text-muted);
  opacity: 0.85;
}

.tm-dash__filters {
  margin-bottom: 0;
}

.tm-dash__filters .tm-filter-bar {
  justify-content: flex-start;
  padding: 0.65rem 0.95rem;
}

.tm-dash__filter-bar .tm-filter-bar__fields {
  align-items: flex-end;
  flex: 1 1 auto;
}

.tm-dash__filter-field--range {
  flex: 0 1 11rem !important;
  min-width: 9.5rem;
}

.tm-dash__filter-field--year {
  flex: 0 0 auto !important;
  width: 7.25rem;
  max-width: 7.25rem;
}

.tm-dash__filter-field--date {
  flex: 0 1 10.5rem !important;
  min-width: 9rem;
  max-width: 11rem;
}

.tm-dash__filter-field[hidden],
.tm-dash__filter-bar [hidden].tm-filter-bar__field {
  display: none !important;
}

.tm-dash__period-chip {
  white-space: nowrap;
}

.tm-dash__filter-bar .tm-filter-bar__actions {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.tm-filter-bar__apply {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 34px;
  padding: 0 0.95rem;
  border: 1px solid var(--uc-brand-600);
  border-radius: var(--uc-radius-sm);
  background: var(--uc-brand-600);
  color: #fff;
  font-size: var(--uc-font-size-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.tm-filter-bar__apply:hover {
  background: var(--uc-brand-700);
  border-color: var(--uc-brand-700);
}

.tm-filter-bar__apply[hidden],
.tm-dash__filter-reset[hidden] {
  display: none !important;
}

a.tm-dash__filter-reset {
  text-decoration: none;
}

.tm-dash__period-note {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0;
  padding: 0.55rem 0.75rem;
  font-size: var(--uc-font-size-xs);
  color: var(--uc-text-muted);
  background: var(--uc-surface-2, #f8fafc);
  border: 1px solid var(--tm-border);
  border-radius: 10px;
}

.tm-dash__period-note .fa {
  margin-top: 0.1rem;
  color: var(--uc-brand-500);
}

.tm-dash__period-note strong {
  color: var(--uc-text);
  font-weight: 600;
}

.tm-dash__period-note--subtle {
  background: transparent;
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}

.tm-dash__chart-empty {
  margin: 0;
  padding: 1.25rem 0.5rem;
  text-align: center;
  font-size: var(--uc-font-size-sm);
  color: var(--uc-text-muted);
}

.tm-dash__bars--weekly .tm-dash__bar-col {
  min-width: 2.1rem;
}

.tm-dash__bars--weekly .tm-dash__bar-label {
  font-size: 9px;
}

@media (max-width: 767px) {
  .tm-dash__filter-bar .tm-filter-bar__fields {
    width: 100%;
  }

  .tm-dash__filter-field--range,
  .tm-dash__filter-field--year,
  .tm-dash__filter-field--date {
    flex: 1 1 100% !important;
    width: 100%;
    max-width: none;
  }

  .tm-dash__filter-bar .tm-filter-bar__actions {
    width: 100%;
  }

  .tm-filter-bar__apply,
  a.tm-dash__filter-reset {
    flex: 1 1 auto;
    justify-content: center;
  }
}

.tm-dash__alert {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.9rem;
  font-size: var(--uc-font-size-sm);
  color: #991b1b;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  box-shadow: none;
}

.tm-dash__alert a {
  color: #b91c1c;
  font-weight: 600;
}

.tm-dash__hero-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  font-size: 11px;
  font-weight: 600;
  color: var(--uc-brand-700);
  background: #eff6ff;
  border: 1px solid #99f6e4;
  border-radius: var(--uc-radius-full);
  white-space: nowrap;
}

.tm-dash__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 0.75rem;
}

.tm-dash__lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: stretch;
}

@media (max-width: 991px) {
  .tm-dash__grid,
  .tm-dash__lists { grid-template-columns: 1fr; }
}

.tm-dash__panel {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.tm-dash__panel--wide {
  min-height: 100%;
}

.tm-dash__panel .tm-filter-panel__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  padding: 0;
}

.tm-dash__panel .tm-filter-panel__body > .tm-empty--panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0.5rem 1rem 1rem;
  padding: 1.75rem 1.25rem;
  border: 1px dashed #e2e8f0;
  border-radius: 10px;
  background: var(--uc-surface-muted);
}

.tm-dash__panel .tm-filter-panel__body > .tm-empty--panel .tm-empty__icon {
  margin-bottom: 0.65rem;
}

.tm-dash__panel .tm-filter-panel__body > .tm-empty--panel .tm-empty__text {
  margin-bottom: 0.85rem;
}

.tm-dash__panel .tm-filter-panel__body > .tm-dash__bars,
.tm-dash__panel .tm-filter-panel__body > .tm-dash__activity,
.tm-dash__panel .tm-filter-panel__body > .tm-dash__breakdown,
.tm-dash__panel .tm-filter-panel__body > .tm-dash__list {
  padding: 0.35rem 1.1rem 1.1rem;
}

.tm-dash__panel-head,
.tm-dash__panel-title,
.tm-dash__panel-meta,
.tm-dash__panel-link {
  /* legacy aliases — prefer tm-filter-panel__* */
}

.tm-dash__panel-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  padding: 0;
}

.tm-dash__panel-title {
  margin: 0;
  font-size: var(--uc-font-size-base);
  font-weight: 600;
  color: var(--uc-text);
  letter-spacing: -0.01em;
}

.tm-dash__panel-meta {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--uc-font-size-xs);
  color: var(--uc-text-muted);
}

.tm-dash__panel-link {
  font-size: var(--uc-font-size-xs);
  font-weight: 600;
  color: var(--uc-brand-600);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: var(--uc-radius-sm);
  transition: background 0.15s ease;
}

.tm-dash__panel-link:hover {
  color: var(--uc-brand-700);
  background: #eff6ff;
  text-decoration: none;
}

.tm-dash__bars {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  height: auto;
  padding: 0.25rem 0.15rem 0.35rem;
}

.tm-dash__activity {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding: 0.25rem 0 0.15rem;
}

.tm-dash__activity-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.tm-dash__activity-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--tm-border);
  border-radius: var(--uc-radius-sm);
  background: var(--uc-surface-muted);
}

.tm-dash__activity-stat--current {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.tm-dash__activity-stat-value {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--uc-text);
}

.tm-dash__activity-stat--current .tm-dash__activity-stat-value {
  color: var(--uc-brand-700);
}

.tm-dash__activity-stat-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--uc-text-muted);
}

.tm-dash__bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.25rem 0.15rem 0.15rem;
  border-radius: var(--uc-radius-sm);
  transition: background 0.15s ease;
}

.tm-dash__bar-col--active:hover,
.tm-dash__bar-col--current:hover {
  background: #f8fafc;
}

.tm-dash__bar-col--current .tm-dash__bar-track {
  border-color: #93c5fd;
  background: #eff6ff;
}

.tm-dash__bar-col--current .tm-dash__bar-label {
  color: var(--uc-brand-700);
  font-weight: 700;
}

.tm-dash__bar-col--idle .tm-dash__bar-value {
  color: #cbd5e1;
}

.tm-dash__bar-col--idle .tm-dash__bar-label {
  color: #94a3b8;
}

.tm-dash__bar-col--idle .tm-dash__bar-track {
  background: #f8fafc;
  border-color: #eef2f7;
}

.tm-dash__bar-value {
  font-size: 11px;
  font-weight: 700;
  color: var(--uc-brand-700);
  line-height: 1;
  min-height: 12px;
}

.tm-dash__bar-col--active .tm-dash__bar-value {
  color: var(--uc-brand-700);
}

.tm-dash__bar-track {
  width: 100%;
  max-width: 22px;
  height: 72px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

.tm-dash__bar-fill {
  width: 100%;
  background: linear-gradient(180deg, #60a5fa 0%, var(--uc-brand-600) 100%);
  border-radius: 999px;
  min-height: 0;
  transition: height 0.28s ease;
}

.tm-dash__bar-fill--current {
  background: linear-gradient(180deg, #38bdf8 0%, var(--uc-brand-700) 100%);
}

.tm-dash__bar-fill--zero {
  height: 0 !important;
  opacity: 0;
}

.tm-dash__bar-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--uc-text-muted);
}

.tm-dash__panel--activity .tm-filter-panel__body {
  padding: 0;
}

.tm-dash__panel--activity .tm-filter-panel__head {
  padding: 1rem 1.5rem;
}

.tm-dash__panel--activity .tm-filter-panel__body > .tm-dash__activity {
  padding: 0.85rem 1.5rem 1.5rem;
}

.tm-dash__panel--activity .tm-dash__bars {
  padding: 0.35rem 0.35rem 0.5rem;
}

@media (max-width: 575px) {
  .tm-dash__activity-summary {
    grid-template-columns: 1fr;
  }

  .tm-dash__bars {
    gap: 0.2rem;
  }

  .tm-dash__bar-track {
    max-width: 18px;
    height: 64px;
  }

  .tm-dash__bar-label {
    font-size: 9px;
  }
}

.tm-dash__breakdown {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.tm-dash__breakdown-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.tm-dash__breakdown-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--uc-font-size-xs);
  color: var(--uc-text-muted);
}

.tm-dash__breakdown-meta strong {
  color: var(--uc-text);
  font-weight: 600;
}

.tm-dash__breakdown-track {
  height: 6px;
  background: #f1f5f9;
  border: none;
  border-radius: var(--uc-radius-full);
  overflow: hidden;
}

.tm-dash__breakdown-fill {
  height: 100%;
  border-radius: var(--uc-radius-full);
  min-width: 2px;
}

.tm-dash__breakdown-fill--blue { background: #3b82f6; }
.tm-dash__breakdown-fill--red { background: #ef4444; }
.tm-dash__breakdown-fill--amber { background: #f59e0b; }
.tm-dash__breakdown-fill--green { background: #10b981; }

/* Dashboard list rows (replaces tables) */
.tm-dash__list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0.65rem 0.75rem;
}

.tm-dash__item {
  margin: 0;
}

.tm-dash__item + .tm-dash__item {
  border-top: 1px solid #f1f5f9;
}

.tm-dash__item-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.45rem;
  border-radius: 8px;
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: var(--tm-transition-hover);
}

.tm-dash__item-link:hover {
  background: var(--tm-hover-bg);
  border: 1px solid var(--uc-brand-100);
  text-decoration: none;
  color: inherit;
}

.tm-dash__item-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.tm-dash__item-icon--project { color: #d97706; }
.tm-dash__item-icon--personal { color: #7c3aed; }
.tm-dash__item-icon--folder { color: #2563eb; }

.tm-dash__item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.tm-dash__item-title {
  font-size: var(--uc-font-size-sm);
  font-weight: 600;
  color: var(--uc-text);
  line-height: 1.35;
  word-break: break-word;
}

.tm-dash__item-meta {
  font-size: var(--uc-font-size-xs);
  color: var(--uc-text-muted);
  line-height: 1.35;
}

.tm-dash__item-aside {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  min-width: 72px;
}

.tm-dash__item-pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--uc-text);
}

.tm-dash__item-aside .tm-dash__progress-track {
  width: 72px;
}

.tm-dash__due {
  flex-shrink: 0;
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: var(--uc-radius-full);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.tm-dash__due--ok { background: #ecfdf5; color: #047857; }
.tm-dash__due--warn { background: #fffbeb; color: #b45309; }
.tm-dash__due--danger { background: #fef2f2; color: #b91c1c; }

.tm-dash__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  font-size: var(--uc-font-size-xs);
  color: var(--uc-text-muted);
  padding: 0 0.15rem;
}

.tm-dash__tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.08rem 0.4rem;
  font-size: 10px;
  font-weight: 600;
  color: var(--uc-brand-700);
  background: #eff6ff;
  border-radius: var(--uc-radius-full);
  vertical-align: middle;
}

.tm-dash__progress-track {
  display: block;
  height: 4px;
  background: #f1f5f9;
  border: none;
  border-radius: var(--uc-radius-full);
  overflow: hidden;
}

.tm-dash__progress-fill {
  display: block;
  height: 100%;
  background: var(--uc-brand-600);
  border-radius: var(--uc-radius-full);
  min-width: 0;
}

/* Legacy table styles kept for other pages */
.tm-dash__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--uc-font-size-sm);
  table-layout: fixed;
}

.tm-dash__table-wrap {
  overflow-x: auto;
  margin: 0;
}

.tm-dash__task-name {
  font-weight: 500;
  color: var(--uc-text);
  line-height: 1.35;
  word-break: break-word;
}

.tm-dash__progress-cell {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 88px;
}

.tm-dash__progress-label {
  font-size: var(--uc-font-size-xs);
  font-weight: 600;
  color: var(--uc-text-muted);
  white-space: nowrap;
}

/* Filter panel */
.tm-filter-panel {
  margin: 0 0 1.25rem;
  background: var(--uc-surface);
  border: 1px solid var(--tm-border);
  border-radius: var(--uc-radius-lg);
  overflow: hidden;
}

.tm-filter-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--tm-border);
  background: var(--uc-surface-muted);
}

.tm-filter-panel__title-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.tm-filter-panel__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--uc-brand-600);
}

.tm-filter-panel__title {
  margin: 0;
  font-size: var(--uc-font-size-sm);
  font-weight: 600;
  color: var(--uc-text);
}

.tm-filter-panel__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: var(--uc-radius-full);
  background: var(--uc-brand-600);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.tm-filter-panel__meta {
  margin: 0;
  font-size: var(--uc-font-size-xs);
  color: var(--uc-text-muted);
  font-weight: 500;
}

.tm-filter-panel__action {
  flex-shrink: 0;
}

.tm-filter-panel__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  border: none;
  background: none;
  font-size: var(--uc-font-size-xs);
  font-weight: 600;
  color: var(--uc-brand-600);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.tm-filter-panel__link:hover {
  color: var(--uc-brand-700);
  text-decoration: none;
}

.tm-filter-panel__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: var(--uc-radius-full);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  font-size: 11px;
  font-weight: 700;
  color: var(--uc-brand-700);
}

.tm-content-panel .tm-filter-panel__body {
  padding: 1.1rem 1.25rem 1.25rem;
}

.tm-content-panel.tm-dash__panel .tm-filter-panel__body {
  padding: 0;
}

.tm-content-panel .tm-filter-panel__body > .tm-project-grid,
.tm-content-panel .tm-filter-panel__body > .tm-task-grid {
  margin: 0;
}

.tm-content-panel .uc-tasks__table thead th:first-child,
.tm-content-panel .uc-tasks__table tbody td:first-child {
  padding-left: 0.85rem;
}

.tm-content-panel .uc-tasks__table thead th:last-child,
.tm-content-panel .uc-tasks__table tbody td:last-child {
  padding-right: 0.85rem;
}

.tm-filter-panel--filters {
  margin-bottom: 1.25rem;
}

.tm-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.85rem 1rem;
  margin: 0;
  padding: 1rem 1.15rem 1.15rem;
  background: transparent;
  border: none;
  border-radius: 0;
}

.tm-filter-bar__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.85rem 1rem;
  flex: 1 1 auto;
  min-width: 0;
}

.tm-filter-bar__field {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  min-width: 0;
  flex: 1 1 150px;
}

.tm-filter-bar__field:first-child {
  flex: 2 1 220px;
}

.tm-filter-bar__label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--uc-text-muted);
}

.tm-filter-bar__label .fa {
  font-size: 10px;
  color: var(--uc-brand-500);
}

.tm-filter-bar__search-wrap {
  position: relative;
}

.tm-filter-bar__search-icon {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--uc-text-muted);
  pointer-events: none;
}

.tm-filter-bar__input,
.tm-filter-bar__select {
  height: 34px;
  padding: 0.3rem 0.6rem !important;
  font-size: var(--uc-font-size-sm) !important;
  border: 1px solid var(--tm-border) !important;
  border-radius: var(--uc-radius-sm) !important;
  background: var(--uc-surface) !important;
  color: var(--uc-text) !important;
  transition: var(--tm-transition-hover);
}

.tm-filter-bar__search-wrap .tm-filter-bar__input {
  padding-left: 2rem !important;
}

.tm-filter-bar__input:focus,
.tm-filter-bar__select:focus {
  border-color: var(--tm-border-hover) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.tm-filter-bar__select--active {
  border-color: var(--tm-border-hover) !important;
  background: var(--tm-hover-bg-accent) !important;
  color: var(--uc-text) !important;
  font-weight: 600;
}

.tm-filter-bar__input--active {
  border-color: var(--tm-border-hover) !important;
  background: var(--tm-hover-bg-accent) !important;
}

.tm-filter-bar__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
}

.tm-filter-bar__clear {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 34px;
  padding: 0 0.85rem;
  border: 1px solid var(--tm-border);
  border-radius: var(--uc-radius-sm);
  background: var(--uc-surface);
  color: var(--uc-text-muted);
  font-size: var(--uc-font-size-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tm-filter-bar__clear:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

.tm-filter-bar__clear .fa {
  font-size: 11px;
}

@media (max-width: 767px) {
  .tm-filter-panel__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .tm-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .tm-filter-bar__fields {
    width: 100%;
  }

  .tm-filter-bar__field,
  .tm-filter-bar__field:first-child {
    flex: 1 1 100%;
  }

  .tm-filter-bar__actions {
    width: 100%;
  }

  .tm-filter-bar__clear {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 575px) {
  .tm-filter-bar__field,
  .tm-filter-bar__field:first-child {
    flex: 1 1 100%;
  }
}

.tm-dept-card__meta {
  margin: 0 0 0.75rem;
  font-size: var(--uc-font-size-sm);
  color: var(--uc-text-muted);
}

.tm-dept-card__meta .fa {
  color: var(--uc-brand);
  margin-right: 0.35rem;
}

/* Departments page */
.tm-dept-page__stats {
  margin-bottom: 0.85rem;
}

.tm-dept-page__grid {
  margin-top: 0.15rem;
}

.tm-dept-page__note {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0.85rem 0 0;
  padding: 0.55rem 0.75rem;
  font-size: var(--uc-font-size-xs);
  color: var(--uc-text-muted);
  background: var(--uc-surface-muted);
  border: 1px solid var(--tm-border);
  border-radius: 10px;
}

.tm-dept-page__note .fa {
  margin-top: 0.1rem;
  color: var(--uc-brand-500);
}

.tm-dept-page__sub-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
}

.tm-dept-page__error {
  margin: 0;
  padding: 1.25rem 0.5rem;
  text-align: center;
  color: var(--uc-danger);
  font-size: var(--uc-font-size-sm);
}

.tm-dept-page__empty-row {
  text-align: center;
  color: var(--uc-text-muted);
  padding: 1.25rem 0.75rem !important;
  font-size: var(--uc-font-size-sm);
}

.tm-dept-card .tm-project-card__meta .fa {
  margin-right: 0.3rem;
  color: var(--uc-text-muted);
  font-size: 11px;
}

.tm-dept-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.15rem;
}

.tm-dept-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.55rem;
  border-radius: var(--uc-radius-full);
  font-size: 11px;
  font-weight: 600;
  color: var(--uc-text-muted);
  background: var(--uc-surface-muted);
  border: 1px solid var(--tm-border);
}

.tm-dept-card__chip .fa {
  color: var(--uc-brand-600);
  font-size: 10px;
}

.tm-dept-card--skeleton .tm-project-card__inner {
  gap: 0.55rem;
}

.tm-dept-modal .modal-title .fa {
  margin-right: 0.35rem;
  color: var(--uc-brand-600);
}

.tm-dept-modal__lead,
.tm-dept-modal__confirm {
  margin: 0 0 0.85rem;
  font-size: var(--uc-font-size-sm);
  color: var(--uc-text-muted);
  line-height: 1.45;
}

.tm-dept-modal__confirm strong {
  color: var(--uc-text);
}

/* All tasks page */
.tm-all-tasks__stats {
  margin-bottom: 0.85rem;
}

.tm-all-tasks__task {
  font-weight: 600;
  color: var(--uc-text);
}

/* Team members page */
.tm-team__stats {
  margin-bottom: 0.85rem;
}

.tm-dash__stat--muted .tm-dash__stat-icon {
  color: #94a3b8;
}

.tm-team__name {
  font-weight: 600;
  color: var(--uc-text);
}

.tm-team__username {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--uc-text-muted);
}

.tm-team__email {
  color: var(--uc-brand-600);
  text-decoration: none;
}

.tm-team__email:hover {
  color: var(--uc-brand-700);
  text-decoration: underline;
}

.tm-team__dept {
  color: var(--uc-text-muted);
}

.tm-team__note {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--tm-table-border);
  font-size: var(--uc-font-size-xs);
  color: var(--uc-text-muted);
}

.tm-team__note .fa {
  color: var(--uc-brand-500);
  margin-top: 0.1rem;
}

.tm-content-panel .dataTables_wrapper {
  font-size: var(--uc-font-size-sm);
}

.tm-content-panel .dataTables_wrapper table.dataTable {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: collapse;
}

.tm-content-panel .dataTables_wrapper table.dataTable.no-footer {
  border-bottom: none !important;
}

.tm-content-panel .dataTables_wrapper table.dataTable thead th,
.tm-content-panel .dataTables_wrapper table.dataTable thead td {
  padding: 0.7rem 0.85rem;
  padding-right: 2.1rem !important;
  position: relative;
  background: var(--uc-surface-muted) !important;
  background-image: none !important;
  color: var(--uc-text-muted);
  font-size: var(--uc-font-size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--tm-table-border) !important;
  border-top: none !important;
  box-shadow: none !important;
}

.tm-content-panel .dataTables_wrapper table.dataTable tbody th,
.tm-content-panel .dataTables_wrapper table.dataTable tbody td {
  padding: 0.75rem 0.85rem;
  border-top: 1px solid var(--tm-table-border) !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
  background: transparent !important;
  vertical-align: middle;
  font-size: var(--uc-font-size-sm);
  color: var(--uc-text);
}

.tm-content-panel .dataTables_wrapper table.dataTable.display tbody tr:first-child > td,
.tm-content-panel .dataTables_wrapper table.dataTable.display tbody tr:first-child > th {
  border-top: none !important;
}

.tm-content-panel .dataTables_wrapper table.dataTable.display tbody tr > .sorting_1,
.tm-content-panel .dataTables_wrapper table.dataTable.display tbody tr > .sorting_2,
.tm-content-panel .dataTables_wrapper table.dataTable.display tbody tr > .sorting_3,
.tm-content-panel .dataTables_wrapper table.dataTable.display tbody tr.odd > *,
.tm-content-panel .dataTables_wrapper table.dataTable.display tbody tr.even > *,
.tm-content-panel .dataTables_wrapper table.dataTable.display tbody tr:hover > * {
  box-shadow: none !important;
  background: transparent !important;
}

.tm-content-panel .dataTables_wrapper table.dataTable.display tbody tr:hover > td {
  background: rgba(37, 99, 235, 0.04) !important;
}

.tm-content-panel .dataTables_wrapper table.dataTable thead > tr > th.sorting:before,
.tm-content-panel .dataTables_wrapper table.dataTable thead > tr > th.sorting:after,
.tm-content-panel .dataTables_wrapper table.dataTable thead > tr > th.sorting_asc:before,
.tm-content-panel .dataTables_wrapper table.dataTable thead > tr > th.sorting_asc:after,
.tm-content-panel .dataTables_wrapper table.dataTable thead > tr > th.sorting_desc:before,
.tm-content-panel .dataTables_wrapper table.dataTable thead > tr > th.sorting_desc:after,
.tm-content-panel .dataTables_wrapper table.dataTable thead > tr > td.sorting:before,
.tm-content-panel .dataTables_wrapper table.dataTable thead > tr > td.sorting:after {
  display: none !important;
  content: none !important;
  background: none !important;
}

.tm-content-panel .dataTables_wrapper table.dataTable thead > tr > th.sorting_asc:after {
  display: block !important;
  content: "▴" !important;
  position: absolute !important;
  right: 0.85rem !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  opacity: 0.55 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  color: var(--uc-text-muted) !important;
}

.tm-content-panel .dataTables_wrapper table.dataTable thead > tr > th.sorting_desc:after {
  display: block !important;
  content: "▾" !important;
  position: absolute !important;
  right: 0.85rem !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  opacity: 0.55 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  color: var(--uc-text-muted) !important;
}

.tm-content-panel .dataTables_wrapper .dataTables_length,
.tm-content-panel .dataTables_wrapper .dataTables_filter {
  padding: 0 0.15rem;
}

.tm-content-panel .dataTables_wrapper .dataTables_length,
.tm-content-panel .dataTables_wrapper .dataTables_filter,
.tm-content-panel .dataTables_wrapper .dataTables_info,
.tm-content-panel .dataTables_wrapper .dataTables_paginate {
  font-size: var(--uc-font-size-xs);
  color: var(--uc-text-muted);
}

.tm-content-panel .dataTables_wrapper .dataTables_length {
  margin-bottom: 0.85rem;
}

.tm-content-panel .dataTables_wrapper .dataTables_info,
.tm-content-panel .dataTables_wrapper .dataTables_paginate {
  margin-top: 0.85rem;
  padding-top: 0.35rem;
}

.tm-content-panel .dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--tm-border);
  border-radius: var(--uc-radius-sm);
  padding: 0.2rem 0.35rem;
  background: var(--uc-surface);
  color: var(--uc-text);
}

.tm-content-panel .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--uc-radius-sm) !important;
  border: 1px solid var(--tm-border) !important;
  background: var(--uc-surface) !important;
  color: var(--uc-text-muted) !important;
  margin: 0 0.1rem;
}

.tm-content-panel .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--uc-brand-600) !important;
  border-color: var(--uc-brand-600) !important;
  color: #fff !important;
}

.uc-tasks__table .uc-tasks__actions {
  justify-content: flex-start;
}

.uc-tasks__table .uc-tasks__actions .uc-tasks__btn {
  text-decoration: none;
  position: relative;
  z-index: 1;
}

/* User detail page */
.tm-user-detail__stats {
  margin-bottom: 0.85rem;
}

.tm-user-detail__overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}

@media (max-width: 767px) {
  .tm-user-detail__overview {
    grid-template-columns: 1fr;
  }
}

.tm-user-detail__overview-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tm-user-detail__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--uc-text-muted);
}

.tm-user-detail__value {
  font-size: var(--uc-font-size-sm);
  color: var(--uc-text);
}

.tm-user-detail__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tm-user-detail__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1rem;
}

@media (max-width: 767px) {
  .tm-user-detail__grid {
    grid-template-columns: 1fr;
  }
}

.tm-user-detail__field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.tm-user-detail__field--wide {
  grid-column: 1 / -1;
}

.tm-user-detail__field-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--uc-text-muted);
}

.tm-user-detail__field-label .fa {
  color: var(--uc-brand-500);
  font-size: 10px;
}

.tm-user-detail__input {
  width: 100%;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--tm-border);
  border-radius: var(--uc-radius-sm);
  background: var(--uc-surface);
  color: var(--uc-text);
  font-size: var(--uc-font-size-sm);
}

.tm-user-detail__input:focus {
  outline: none;
  border-color: var(--uc-brand-500);
}

.tm-user-detail__input:disabled,
.tm-user-detail__input[readonly] {
  background: var(--uc-surface-muted);
  color: var(--uc-text-muted);
}

.tm-user-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

.tm-user-detail__profile-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tm-user-detail__avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-subtle, #e2e8f0);
  background: var(--surface-muted, #f8fafc);
}

/* Profile page */
.tm-profile {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.tm-profile__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1.1rem 1.35rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--tm-border);
  border-left: 4px solid var(--uc-brand-500);
  border-radius: var(--uc-radius-lg);
  background: linear-gradient(135deg, var(--uc-brand-50) 0%, var(--uc-surface) 42%);
}

.tm-profile__hero-media {
  position: relative;
  flex-shrink: 0;
}

.tm-profile__avatar {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--uc-surface);
  outline: 1px solid var(--uc-brand-200);
  background: var(--uc-surface-muted);
}

.tm-profile__rank-badge {
  position: absolute;
  right: -4px;
  bottom: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  border: 2px solid var(--uc-surface);
  background: var(--uc-surface);
  box-shadow: none;
}

.tm-profile__rank-emoji {
  font-size: 1.1rem;
  line-height: 1;
}

.tm-profile__rank-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--uc-brand-700);
}

.tm-profile__hero-body {
  flex: 1;
  min-width: min(100%, 18rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tm-profile__hero-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
}

.tm-profile__identity {
  min-width: 0;
}

.tm-profile__name {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--uc-text);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.tm-profile__role {
  margin: 0.25rem 0 0;
  font-size: var(--uc-font-size-sm);
  color: var(--uc-text-muted);
}

.tm-profile__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.55rem;
}

.tm-profile__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--uc-brand-700);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--uc-brand-100);
  border-radius: 999px;
}

.tm-profile__score-card {
  flex-shrink: 0;
  min-width: 11rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--uc-brand-100);
  border-radius: var(--uc-radius-md);
  background: rgba(255, 255, 255, 0.82);
}

.tm-profile__score-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--uc-text-muted);
}

.tm-profile__score-value {
  margin-top: 0.25rem;
}

.tm-profile__score-value .tm-leaderboard__points {
  font-size: 1.35rem;
}

.tm-profile__score-value .tm-leaderboard__points strong {
  font-size: 1.5rem;
}

.tm-profile__score-rank {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--uc-font-size-xs);
  color: var(--uc-text-muted);
  line-height: 1.4;
}

.tm-profile__bio {
  margin: 0;
  max-width: 42rem;
  font-size: var(--uc-font-size-sm);
  color: var(--uc-text);
  line-height: 1.55;
}

.tm-profile__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.tm-profile__contact {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--tm-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--uc-text);
  font-size: var(--uc-font-size-xs);
  text-decoration: none;
}

.tm-profile__contact:hover,
.tm-profile__contact:focus {
  border-color: var(--uc-brand-300);
  color: var(--uc-brand-700);
  text-decoration: none;
}

.tm-profile__contact .fa {
  color: var(--uc-brand-500);
}

.tm-profile__metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.65rem;
}

@media (max-width: 1199px) {
  .tm-profile__metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .tm-profile__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tm-profile__metric {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid var(--tm-border);
  border-radius: var(--uc-radius-md);
  background: var(--uc-surface);
}

.tm-profile__metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  font-size: 0.95rem;
}

.tm-profile__metric--blue .tm-profile__metric-icon {
  color: var(--uc-brand-700);
  background: var(--uc-brand-50);
}

.tm-profile__metric--violet .tm-profile__metric-icon {
  color: #6d28d9;
  background: #f5f3ff;
}

.tm-profile__metric--rose .tm-profile__metric-icon {
  color: #be185d;
  background: #fdf2f8;
}

.tm-profile__metric--green .tm-profile__metric-icon {
  color: #047857;
  background: #ecfdf5;
}

.tm-profile__metric--amber .tm-profile__metric-icon {
  color: #b45309;
  background: #fffbeb;
}

.tm-profile__metric--slate .tm-profile__metric-icon {
  color: #475569;
  background: #f8fafc;
}

.tm-profile__metric-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.tm-profile__metric-body strong {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--uc-text);
  line-height: 1.1;
}

.tm-profile__metric-body span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--uc-text-muted);
}

.tm-profile__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 0.85rem;
  align-items: start;
}

@media (max-width: 991px) {
  .tm-profile__layout {
    grid-template-columns: 1fr;
  }
}

.tm-profile__column {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}

.tm-profile__info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}

@media (max-width: 575px) {
  .tm-profile__info-grid {
    grid-template-columns: 1fr;
  }
}

.tm-profile__info-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--tm-border);
  border-radius: var(--uc-radius-sm);
  background: var(--uc-surface-muted);
}

.tm-profile__info-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--uc-text-muted);
}

.tm-profile__info-value {
  font-size: var(--uc-font-size-sm);
  color: var(--uc-text);
  word-break: break-word;
}

.tm-profile__rates {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.tm-profile__rate-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  font-size: var(--uc-font-size-sm);
  color: var(--uc-text-muted);
}

.tm-profile__rate-head strong {
  color: var(--uc-text);
  font-size: var(--uc-font-size-sm);
}

.tm-profile__rate-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--uc-surface-muted);
  border: 1px solid var(--tm-border);
  overflow: hidden;
}

.tm-profile__rate-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--uc-brand-400), var(--uc-brand-600));
}

.tm-profile__form-section {
  margin-top: 0.35rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--tm-border);
}

.tm-profile__form-section-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--uc-brand-700);
}

.tm-profile__form-section-title .fa {
  font-size: 11px;
}

.tm-profile-upload__preview {
  width: 72px;
  height: 72px;
}

.tm-profile-upload {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.tm-profile-upload__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.tm-profile-upload__picker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--tm-border);
  border-radius: var(--uc-radius-sm);
  background: var(--uc-surface-muted);
  color: var(--uc-text);
  font-size: var(--uc-font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.tm-profile-upload__picker:hover {
  border-color: var(--uc-brand-400);
  background: var(--uc-brand-50);
}

.tm-profile-upload__picker .fa {
  color: var(--uc-brand-600);
}

.tm-profile-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tm-profile-upload__hint {
  margin: 0;
  font-size: var(--uc-font-size-xs);
  color: var(--uc-text-muted);
  line-height: 1.45;
}

.tm-user-detail__textarea {
  min-height: 5rem;
  resize: vertical;
}

/* Add user modal */
.tm-add-user-modal {
  --tm-border: var(--uc-border);
  --tm-table-border: #e8eef6;
}

.tm-add-user-modal .modal-dialog {
  width: min(52rem, calc(100vw - 1.5rem));
}

.tm-add-user-modal .modal-content {
  border: 1px solid var(--uc-border-strong);
  border-radius: var(--uc-radius-lg);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
  overflow: hidden;
}

.tm-add-user-modal__head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--uc-border);
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.tm-add-user-modal__head-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--uc-radius-md);
  background: var(--uc-brand-600);
  color: #fff;
  font-size: 1rem;
}

.tm-add-user-modal__head .close {
  margin-top: 0.1rem;
  opacity: 0.55;
}

.tm-add-user-modal__head .modal-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--uc-text);
  letter-spacing: -0.01em;
}

.tm-add-user-modal__sub {
  margin: 0.3rem 0 0;
  font-size: var(--uc-font-size-sm);
  color: var(--uc-text-muted);
  line-height: 1.5;
  max-width: 36rem;
}

.tm-add-user-modal__banner {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid #bfdbfe;
  border-radius: var(--uc-radius-md);
  background: #eff6ff;
  color: #1e40af;
  font-size: var(--uc-font-size-sm);
  line-height: 1.45;
}

.tm-add-user-modal__banner .fa {
  margin-top: 0.15rem;
  font-size: 1rem;
  opacity: 0.9;
}

.tm-add-user-modal__banner p {
  margin: 0;
}

.tm-add-user-modal__body {
  padding: 1.1rem 1.25rem 1.2rem;
  background: var(--uc-surface);
  max-height: min(68vh, 40rem);
  overflow-y: auto;
}

.tm-add-user-modal__groups {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tm-add-user-modal__group {
  padding: 1rem 1rem 0.85rem;
  border: 1px solid var(--uc-border-strong);
  border-radius: var(--uc-radius-md);
  background: var(--uc-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.tm-add-user-modal__group + .tm-add-user-modal__group {
  margin-top: 0;
}

.tm-add-user-modal__group-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--uc-brand-700);
}

.tm-add-user-modal__group-title .fa {
  font-size: 12px;
  opacity: 0.9;
}

.tm-add-user-modal__section {
  display: none;
}

.tm-add-user-modal__hint {
  font-size: 11px;
  color: var(--uc-text-muted);
  line-height: 1.35;
}

.tm-add-user-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  padding: 0.95rem 1.25rem;
  border-top: 1px solid var(--uc-border);
  background: var(--uc-surface-muted);
}

.tm-add-user-modal__btn {
  min-width: 7rem;
  border-radius: var(--uc-radius-sm);
  font-size: var(--uc-font-size-sm);
  font-weight: 600;
  padding: 0.5rem 1rem;
}

.tm-add-user-modal__btn--primary {
  background: var(--uc-brand-600);
  border-color: var(--uc-brand-600);
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2);
}

.tm-add-user-modal__btn--primary:hover,
.tm-add-user-modal__btn--primary:focus {
  background: var(--uc-brand-700);
  border-color: var(--uc-brand-700);
}

.tm-add-user-modal__btn .fa {
  margin-right: 0.35rem;
}

.tm-add-user-modal__confirm {
  margin: 0;
  font-size: var(--uc-font-size-sm);
  color: var(--uc-text);
}

.tm-add-user-modal .tm-user-detail__input {
  border: 1px solid var(--uc-border-strong);
  background: var(--uc-surface);
}

.tm-add-user-modal .tm-user-detail__input:focus {
  border-color: var(--uc-brand-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

@media (max-width: 767px) {
  .tm-add-user-modal .modal-dialog {
    margin: 0.75rem;
    width: auto;
  }
}

/* Create task form */
.tm-create-task {
  padding: 0.15rem 0 0.35rem;
}

.tm-create-task__section {
  grid-column: 1 / -1;
  margin: 0.35rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px solid var(--tm-border);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--uc-brand-600);
}

.tm-create-task__section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.tm-create-task__hint {
  font-size: 11px;
  color: var(--uc-text-muted);
  line-height: 1.35;
}

.tm-create-task__textarea {
  min-height: 6.5rem;
  resize: vertical;
}

.tm-create-task__file {
  width: 100%;
  padding: 0.4rem 0.55rem;
  border: 1px dashed var(--tm-border);
  border-radius: var(--uc-radius-sm);
  background: var(--uc-surface-muted);
  color: var(--uc-text);
  font-size: var(--uc-font-size-sm);
}

.tm-create-task__file:focus {
  outline: none;
  border-color: var(--uc-brand-500);
  border-style: solid;
}

.tm-create-task__todo-field {
  gap: 0.45rem;
}

.tm-create-task__todo-add {
  display: flex;
  gap: 0.45rem;
  align-items: stretch;
}

.tm-create-task__todo-add .tm-user-detail__input {
  flex: 1;
  min-width: 0;
}

.tm-create-task__todo-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--uc-brand-500);
  border-radius: var(--uc-radius-sm);
  background: #eff6ff;
  color: var(--uc-brand-700);
  font-size: var(--uc-font-size-sm);
  font-weight: 600;
  cursor: pointer;
}

.tm-create-task__todo-btn:hover,
.tm-create-task__todo-btn:focus {
  background: #dbeafe;
  outline: none;
}

.tm-create-task__todos {
  list-style: none;
  margin: 0.15rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.tm-create-task__todo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--tm-border);
  border-radius: var(--uc-radius-sm);
  background: var(--uc-surface-muted);
  font-size: var(--uc-font-size-sm);
  color: var(--uc-text);
}

.tm-create-task__todo-text {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.tm-create-task__todo-remove {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: var(--uc-radius-sm);
  background: transparent;
  color: var(--uc-text-muted);
  cursor: pointer;
}

.tm-create-task__todo-remove:hover,
.tm-create-task__todo-remove:focus {
  background: #fee2e2;
  color: #b91c1c;
  outline: none;
}

.tm-create-task__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--tm-border);
}

.tm-create-task .note-editor {
  border: 1px solid var(--tm-border);
  border-radius: var(--uc-radius-sm);
  overflow: hidden;
}

.tm-create-task .note-toolbar {
  background: var(--uc-surface-muted);
  border-bottom: 1px solid var(--tm-border);
}

.tm-create-task .note-editable {
  min-height: 8rem;
  font-size: var(--uc-font-size-sm);
  color: var(--uc-text);
}

.tm-create-task-modal .modal-dialog {
  width: min(56rem, calc(100vw - 2rem));
  max-width: none;
  margin: 1.25rem auto;
}

.tm-create-task-modal .modal-content {
  border: 1px solid var(--tm-border);
  border-radius: var(--uc-radius-lg);
  box-shadow: none;
  overflow: hidden;
}

.tm-create-task-modal__head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--tm-border);
  background: var(--uc-surface-muted);
}

.tm-create-task-modal__head .close {
  margin-top: 0.1rem;
  opacity: 0.55;
}

.tm-create-task-modal__head .modal-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--uc-text);
}

.tm-create-task-modal__sub {
  margin: 0.25rem 0 0;
  font-size: var(--uc-font-size-xs);
  color: var(--uc-text-muted);
  line-height: 1.45;
  max-width: 34rem;
}

.tm-create-task-modal__body {
  padding: 1rem 1.15rem 1.1rem;
  background: var(--uc-surface);
  max-height: min(72vh, 44rem);
  overflow-y: auto;
}

.tm-create-task-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.85rem 1.15rem;
  border-top: 1px solid var(--tm-border);
  background: var(--uc-surface-muted);
}

.tm-create-task-modal__btn {
  min-width: 6.5rem;
  border-radius: var(--uc-radius-sm);
  font-size: var(--uc-font-size-sm);
  font-weight: 600;
}

.tm-create-task-modal__btn--primary {
  background: var(--uc-brand-600);
  border-color: var(--uc-brand-600);
}

.tm-create-task-modal__btn--primary:hover,
.tm-create-task-modal__btn--primary:focus {
  background: var(--uc-brand-700);
  border-color: var(--uc-brand-700);
}

.tm-create-task-modal__btn .fa {
  margin-right: 0.35rem;
}

.tm-create-task-modal .note-editor {
  border: 1px solid var(--tm-border);
  border-radius: var(--uc-radius-sm);
  overflow: hidden;
}

.tm-create-task-modal .note-toolbar {
  background: var(--uc-surface-muted);
  border-bottom: 1px solid var(--tm-border);
}

.tm-create-task-modal .note-editable {
  min-height: 7rem;
  font-size: var(--uc-font-size-sm);
}

@media (max-width: 767px) {
  .tm-create-task-modal .modal-dialog {
    width: calc(100vw - 1.25rem);
    margin: 0.65rem auto;
  }

  .tm-create-task__todo-add {
    flex-direction: column;
  }

  .tm-create-task__todo-btn {
    justify-content: center;
  }
}

/* Reports hub */
.tm-reports .tm-filter-panel {
  margin-bottom: 0.65rem;
}

.tm-reports .tm-dash__grid {
  gap: 0.65rem;
  margin-bottom: 0.65rem;
}

.tm-reports .tm-reports__stats {
  margin-bottom: 0.65rem;
}

.tm-reports .tm-reports__tabs {
  margin-bottom: 0.65rem;
}

.tm-reports .tm-reports__panel--chart .tm-filter-panel__body {
  min-height: 0;
  padding: 0;
}

.tm-reports .tm-reports__panel--chart .tm-dash__bars,
.tm-reports .tm-reports__panel--chart .tm-dash__breakdown {
  padding: 0.75rem 0.95rem 0.85rem;
}

.tm-reports .tm-reports__panel--table .tm-filter-panel__body {
  padding: 1.1rem 1.25rem 1.25rem;
}

.tm-reports .tm-reports__panel--table .uc-tasks__table-wrap {
  margin: 0;
  padding: 0;
}

.tm-reports__filters {
  margin-bottom: 0.85rem;
}

.tm-reports__filters .tm-filter-bar {
  justify-content: flex-start;
  padding: 0.65rem 0.95rem;
}

.tm-reports__filter-bar .tm-filter-bar__fields {
  align-items: flex-end;
  flex: 0 0 auto;
  width: auto;
}

.tm-reports__filter-bar .tm-filter-bar__field:first-child {
  flex: 0 0 auto;
}

.tm-reports__filter-field--year {
  flex: 0 0 auto !important;
  width: 7.25rem;
  max-width: 7.25rem;
}

.tm-reports__filter-field--department {
  flex: 0 1 16rem !important;
  max-width: 16rem;
  min-width: 11rem;
}

@media (max-width: 575px) {
  .tm-reports__filter-bar .tm-filter-bar__fields {
    flex-direction: column;
    align-items: stretch;
  }

  .tm-reports__filter-field--year,
  .tm-reports__filter-field--department {
    width: 100%;
    max-width: none;
  }
}

.tm-reports__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.85rem;
  padding: 0.35rem;
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 10px;
  background: var(--surface, #fff);
}

.tm-reports__tab {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary, #64748b);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.tm-reports__tab:hover {
  color: var(--brand-600, #1e4091);
  background: var(--surface-muted, #f8fafc);
  text-decoration: none;
}

.tm-reports__tab--active {
  color: var(--brand-700, #163172);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}

.tm-reports__stats {
  margin-bottom: 0.85rem;
}

.tm-reports__table {
  font-size: 0.875rem;
}

.tm-reports .tm-reports__panel--table .uc-tasks__table thead th:first-child,
.tm-reports .tm-reports__panel--table .uc-tasks__table tbody td:first-child {
  padding-left: 0.95rem;
}

.tm-reports .tm-reports__panel--table .uc-tasks__table thead th:last-child,
.tm-reports .tm-reports__panel--table .uc-tasks__table tbody td:last-child {
  padding-right: 0.95rem;
}

.tm-reports__empty-row {
  text-align: center;
  color: var(--uc-text-muted);
  padding: 1rem 0.75rem !important;
  font-size: var(--uc-font-size-sm);
}

.tm-reports__sub {
  font-size: 0.75rem;
  color: var(--text-muted, #94a3b8);
  margin-top: 0.15rem;
}

.tm-reports__rate {
  font-weight: 600;
  color: var(--brand-700, #163172);
}

.tm-reports__footnote {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted, #94a3b8);
}

.tm-reports__footnote .fa {
  margin-right: 0.35rem;
}

.tm-reports__summary-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.65rem;
}

.tm-reports__summary-list li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 8px;
  background: var(--surface-muted, #f8fafc);
}

.tm-reports__summary-list span {
  font-size: 0.75rem;
  color: var(--text-muted, #94a3b8);
}

.tm-reports__summary-list strong {
  font-size: 1.125rem;
  color: var(--text-primary, #0f172a);
}

.tm-reports__ok { color: #047857 !important; }
.tm-reports__warn { color: #b45309 !important; }
.tm-reports__bad { color: #b91c1c !important; }

.tm-reports__empty {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted, #94a3b8);
}

/* Usage leaderboard */
.tm-leaderboard__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

@media (max-width: 991px) {
  .tm-leaderboard__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .tm-leaderboard__stats {
    grid-template-columns: 1fr;
  }
}

.tm-leaderboard__stat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--tm-border);
  border-radius: var(--uc-radius-md);
  background: var(--uc-surface);
}

.tm-leaderboard__stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--uc-radius-sm);
  background: #eff6ff;
  color: var(--uc-brand-600);
  font-size: 14px;
}

.tm-leaderboard__stat-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.tm-leaderboard__stat-value {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--uc-text);
}

.tm-leaderboard__stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--uc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tm-leaderboard__note {
  margin: 0 0 1.25rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid #e2e8f0;
  border-radius: var(--uc-radius-sm);
  background: #f8fafc;
  font-size: 12px;
  color: var(--uc-text-muted);
  line-height: 1.45;
}

.tm-leaderboard__note .fa {
  color: var(--uc-brand-600);
  margin-right: 0.35rem;
}

.tm-leaderboard__podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

.tm-leaderboard__podium--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  padding: 1.5rem;
  border: 1px dashed #e2e8f0;
  border-radius: var(--uc-radius-lg);
  background: var(--uc-surface-muted);
  color: var(--uc-text-muted);
  font-size: 13px;
}

.tm-leaderboard__podium--empty p {
  margin: 0;
}

@media (max-width: 767px) {
  .tm-leaderboard__podium {
    grid-template-columns: 1fr;
  }
}

.tm-leaderboard__podium-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.1rem 1rem 1rem;
  border: 1px solid var(--tm-border);
  border-radius: var(--uc-radius-lg);
  background: var(--uc-surface);
}

.tm-leaderboard__podium-card--gold {
  border-color: #fcd34d;
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%);
}

.tm-leaderboard__podium-card--silver {
  border-color: #cbd5e1;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.tm-leaderboard__podium-card--bronze {
  border-color: #fdba74;
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
}

.tm-leaderboard__podium-rank {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--uc-text-muted);
  margin-bottom: 0.55rem;
}

.tm-leaderboard__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e2e8f0;
  margin-bottom: 0.55rem;
}

.tm-leaderboard__podium-card--gold .tm-leaderboard__avatar {
  border-color: #f59e0b;
}

.tm-leaderboard__podium-name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--uc-text);
  line-height: 1.3;
}

.tm-leaderboard__podium-dept {
  margin: 0.2rem 0 0.55rem;
  font-size: 11px;
  color: var(--uc-text-muted);
}

.tm-leaderboard__podium-score {
  margin: 0 0 0.65rem;
  font-size: 12px;
  color: var(--uc-text-muted);
}

.tm-leaderboard__podium-score strong {
  font-size: 1.25rem;
  color: var(--uc-brand-700);
}

.tm-leaderboard__podium-metrics {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}

.tm-leaderboard__podium-metrics li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.45rem 0.35rem;
  border-radius: var(--uc-radius-sm);
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid #e2e8f0;
}

.tm-leaderboard__podium-metrics span {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--uc-text-muted);
}

.tm-leaderboard__podium-metrics strong {
  font-size: 13px;
  color: var(--uc-text);
}

.tm-leaderboard__medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}

.tm-leaderboard__medal--gold {
  background: linear-gradient(135deg, #fbbf24, #d97706);
}

.tm-leaderboard__medal--silver {
  background: linear-gradient(135deg, #cbd5e1, #64748b);
}

.tm-leaderboard__medal--bronze {
  background: linear-gradient(135deg, #fdba74, #c2410c);
}

.tm-leaderboard__rank-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65rem;
  height: 1.65rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #f1f5f9;
  font-size: 11px;
  font-weight: 700;
  color: var(--uc-text-muted);
}

.tm-leaderboard__stat-icon--emoji {
  background: #fffbeb;
  font-size: 1.15rem;
  line-height: 1;
}

.tm-leaderboard__podium-rank--emoji {
  font-size: 1.75rem;
  line-height: 1;
  margin-bottom: 0.45rem;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}

.tm-leaderboard__points {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: #fffbeb;
  color: #92400e;
  font-size: 12px;
  line-height: 1.2;
}

.tm-leaderboard__points-emoji {
  font-size: 0.95rem;
  line-height: 1;
}

.tm-leaderboard__points strong {
  font-size: 13px;
  font-weight: 700;
  color: #b45309;
}

.tm-leaderboard__points-label {
  font-weight: 600;
  color: #a16207;
}

.tm-leaderboard__podium-score .tm-leaderboard__points {
  background: transparent;
  padding: 0;
  font-size: 13px;
}

.tm-leaderboard__podium-score .tm-leaderboard__points strong {
  font-size: 1.25rem;
  color: var(--uc-brand-700);
}

.tm-leaderboard__medal--emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: 1.75rem;
  font-size: 1.35rem;
  line-height: 1;
  background: transparent;
  color: inherit;
}

.tm-leaderboard__score {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--uc-brand-700);
  font-size: 12px;
  font-weight: 700;
}

.tm-leaderboard__row--top {
  background: #fafbff;
}

.tm-leaderboard__panel .tm-filter-panel__body {
  padding: 0;
}

/* Projects page — grid sits on the page, not inside a panel */
.uc-tasks .tm-project-grid {
  margin-top: 0.15rem;
}

@media (max-width: 900px) {
  .tm-project-task-board__head {
    display: none;
  }

  .tm-project-task-board__row {
    grid-template-columns: 1fr;
    gap: 0.45rem;
    padding: 0.85rem 1rem;
  }

  .tm-project-task-board__due::before {
    content: 'Due ';
    color: var(--uc-text-muted);
    font-weight: 600;
  }
}

@media (max-width: 575px) {
  .uc-tasks #task-container.tm-project-grid,
  .uc-tasks .tm-project-grid {
    grid-template-columns: 1fr;
  }
}

/* Review queue tables (pending / to approve) */
.tm-table-progress {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 8.5rem;
  max-width: 11rem;
}

.tm-table-progress__track {
  flex: 1;
  height: 6px;
  border-radius: var(--uc-radius-full);
  background: var(--uc-surface-muted, #eef2f7);
  overflow: hidden;
}

.tm-table-progress__bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--uc-brand-500), var(--uc-brand-600));
}

.tm-table-progress__label {
  font-size: 10px;
  font-weight: 600;
  color: var(--uc-text-muted);
  white-space: nowrap;
}

.tm-review-table .tm-review-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  margin-right: 0.35rem;
  padding: 0;
  border: 1px solid var(--uc-border, #e5e7eb);
  border-radius: var(--uc-radius-sm, 6px);
  background: #fff;
  color: var(--uc-text-muted);
  vertical-align: middle;
  transition: transform 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tm-review-table .tm-review-expand:hover,
.tm-review-table .tm-review-expand:focus {
  color: var(--uc-brand-600);
  border-color: var(--uc-brand-200, #bfdbfe);
}

.tm-review-table tr.shown .tm-review-expand {
  transform: rotate(90deg);
  color: var(--uc-brand-600);
  border-color: var(--uc-brand-200, #bfdbfe);
}

.tm-review-table .tm-review-expand__label {
  font-weight: 600;
  color: var(--uc-text);
}

.tm-review-detail {
  padding: 0.85rem 0.5rem 0.35rem;
  background: var(--uc-surface-muted, #f8fafc);
  border-radius: var(--uc-radius-md, 8px);
}

.tm-review-detail .tm-task-card__progress-label,
.tm-review-detail .tm-task-card__checklist,
.tm-review-detail .tm-task-card__details {
  margin-top: 0.65rem;
}

.tm-review-detail .tm-task-card__checklist {
  margin-bottom: 0;
}

.tm-review-modal__lead {
  margin: 0 0 0.85rem;
  color: var(--uc-text-muted);
}

/* DataTables Responsive — mobile collapse/expand rows */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
  padding-left: 0.85rem !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
  color: var(--uc-brand-600);
  font-size: 10px;
}

table.dataTable > tbody > tr.child {
  background: var(--uc-surface-muted);
}

table.dataTable > tbody > tr.child ul.dtr-details {
  margin: 0.5rem 0;
  padding: 0;
  list-style: none;
}

table.dataTable > tbody > tr.child span.dtr-title {
  display: inline-block;
  min-width: 7rem;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--uc-text-muted);
}

table.dataTable > tbody > tr.child span.dtr-data {
  font-size: var(--uc-font-size-sm);
  color: var(--uc-text);
}

.tm-file-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.tm-file-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 5.5rem;
  text-align: center;
  font-size: var(--uc-font-size-xs);
  color: var(--uc-text);
  text-decoration: none;
  word-break: break-word;
}

.tm-file-grid__item:hover {
  color: var(--uc-brand-600);
  text-decoration: none;
}

.uc-tasks__table tbody tr.shown + tr td {
  padding: 0.65rem 1.15rem 1rem;
  background: var(--uc-surface-muted, #f8fafc);
  border-bottom: 1px solid var(--uc-border, #e5e7eb);
}


/* ===== theme/task-workspace.css ===== */
/* Task workspace — navigation, cards, filters (v2) */

.uc-tasks {
  --ws-radius: var(--uc-radius-lg);
  --ws-gap: 0.85rem;
}

/* ── Topbar ── */
.uc-tasks .lh-topbar {
  margin-bottom: 0;
  padding: 0.15rem 0 0.65rem;
}

.uc-tasks .lh-topbar__name {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.uc-tasks .lh-topbar__sub {
  font-size: var(--uc-font-size-xs);
}

/* ── Filter panels (compact) ── */
.uc-tasks .tm-filter-panel--filters {
  margin-bottom: var(--ws-gap);
  border-radius: var(--ws-radius);
}

.uc-tasks .tm-filter-panel--filters .tm-filter-panel__head {
  padding: 0.55rem 0.85rem;
}

.uc-tasks .tm-filter-panel--filters .tm-filter-panel__title {
  font-size: var(--uc-font-size-sm);
}

.uc-tasks .tm-filter-bar {
  padding: 0.65rem 0.85rem 0.75rem;
  gap: 0.65rem;
}

.uc-tasks .tm-filter-bar__fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.55rem 0.65rem;
  flex: 1;
}

.uc-tasks .tm-filter-bar__field {
  min-width: 0;
}

.uc-tasks .tm-filter-bar__label {
  font-size: 10px;
  margin-bottom: 0.2rem;
}

.uc-tasks .tm-filter-bar__input,
.uc-tasks .tm-filter-bar__select {
  min-height: 2.1rem;
  font-size: var(--uc-font-size-xs);
}

/* ── Content panels ── */
.uc-tasks .tm-content-panel {
  border-radius: var(--ws-radius);
  margin-bottom: var(--ws-gap);
}

.uc-tasks .tm-content-panel--flush .tm-filter-panel__head {
  display: none;
}

.uc-tasks .tm-content-panel .tm-filter-panel__body {
  padding: 0.85rem;
}

/* ── Task grid ── */
.uc-tasks .tm-task-grid,
.uc-tasks #task-container.tm-task-grid {
  margin-top: 0.15rem;
}

.uc-tasks .tm-task-grid,
.uc-tasks #task-container:not(.tm-project-grid):not(.tm-project-list-host) {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.85rem;
}

/* ── Task cards ── */
.uc-tasks .tm-task-card {
  position: relative;
  padding: 0;
  border-radius: var(--ws-radius);
  overflow: hidden;
  cursor: pointer;
}

.uc-tasks .tm-task-card--accent-ok {
  --tm-card-accent: #059669;
}

.uc-tasks .tm-task-card--accent-warn {
  --tm-card-accent: #d97706;
}

.uc-tasks .tm-task-card--accent-danger {
  --tm-card-accent: #dc2626;
}

.uc-tasks .tm-task-card--accent-neutral {
  --tm-card-accent: var(--uc-brand-500);
}

.uc-tasks .tm-task-card::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 0.65rem;
  bottom: 0.65rem;
  width: 3px;
  border-radius: 999px;
  background: var(--tm-card-accent, var(--uc-brand-500));
  opacity: 0.72;
}

.uc-tasks .tm-task-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.85rem 0.9rem 0.85rem 1rem;
  flex: 1;
}

.uc-tasks .tm-task-card__title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-width: 0;
}

.uc-tasks .tm-task-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 10px;
  font-size: 0.95rem;
}

.uc-tasks .tm-task-card__title-row .box-title {
  flex: 1;
  font-size: var(--uc-font-size-sm);
  line-height: 1.45;
}

.uc-tasks .tm-task-card__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.uc-tasks .tm-task-card__badges {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

.uc-tasks .tm-task-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  font-size: 11px;
  color: var(--uc-text-muted);
  margin: 0;
  padding-top: 0.15rem;
}

.uc-tasks .tm-task-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.uc-tasks .tm-task-card__meta-item .fa {
  color: var(--uc-brand-500);
  font-size: 10px;
}

.uc-tasks .tm-task-card .box-content {
  display: none;
  padding: 0.75rem 0.9rem 0.85rem 1rem;
  margin: 0.35rem 0 0;
  border-top: 1px solid var(--tm-border);
  border-radius: var(--uc-radius-sm);
  background: var(--uc-surface-muted);
}

.uc-tasks .tm-task-card:not(.is-expanded) .tm-task-card__actions,
.uc-tasks .tm-task-card:not(.is-expanded) .tm-task-card__progress-label,
.uc-tasks .tm-task-card:not(.is-expanded) .tm-task-card__progress {
  display: none;
}

.uc-tasks .tm-task-card.is-expanded .box-content {
  display: block;
  background: rgba(255, 255, 255, 0.72);
}

.uc-tasks .tm-task-card.is-expanded .tm-task-card__actions {
  display: flex;
}

.uc-tasks .tm-task-card.is-expanded {
  border-color: var(--uc-brand-100);
  background: var(--uc-brand-50);
}

.uc-tasks .tm-task-card:hover {
  border-color: var(--uc-brand-100);
  background: var(--uc-brand-50);
}

.uc-tasks .tm-task-card--rejected::before {
  background: #dc2626;
}

.uc-tasks .skeleton-loader {
  border: 1px solid var(--tm-border);
  border-radius: var(--ws-radius);
  padding: 0.85rem 0.9rem;
  background: var(--uc-surface);
}

/* ── Project grid & cards ── */
.uc-tasks .tm-project-grid,
.uc-tasks #task-container.tm-project-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0.9rem;
}

.uc-tasks .tm-project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--tm-border);
  border-radius: var(--ws-radius);
  background: var(--uc-surface);
  overflow: hidden;
  gap: 0;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.uc-tasks .tm-project-card:hover {
  border-color: var(--tm-border-hover);
  background: var(--tm-hover-bg-accent);
}

.uc-tasks .tm-project-card__banner {
  display: none;
}

.uc-tasks .tm-project-card__inner {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.9rem 1rem 1rem;
  flex: 1;
}

.uc-tasks .tm-project-card__head {
  align-items: center;
}

.uc-tasks .tm-project-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: var(--uc-brand-50);
  border: 1px solid var(--uc-brand-100);
}

.uc-tasks .tm-project-card__title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.uc-tasks .tm-project-card__actions {
  margin-top: 0.15rem;
  padding-top: 0.35rem;
}

.uc-tasks .tm-project-card--skeleton .tm-project-card__inner {
  gap: 0.5rem;
}

/* ── Buttons ── */
.uc-tasks .uc-tasks__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.38rem 0.72rem;
  border-radius: var(--uc-radius-sm);
  font-size: var(--uc-font-size-xs);
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.uc-tasks .uc-tasks__btn--primary {
  background: var(--uc-brand-600);
  color: #fff;
  border-color: var(--uc-brand-600);
}

.uc-tasks .uc-tasks__btn--primary:hover {
  background: var(--uc-brand-700);
}

.uc-tasks .uc-tasks__btn--muted {
  background: var(--uc-surface);
  color: var(--uc-text);
  border-color: var(--tm-border);
}

.uc-tasks .uc-tasks__btn--muted:hover {
  background: var(--uc-surface-muted);
}

.uc-tasks .uc-tasks__btn--danger {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

/* ── Create task page ── */
.uc-tasks .tm-create-task-panel {
  width: 100%;
  max-width: none;
}

.uc-tasks .tm-create-task-panel .tm-filter-panel__body {
  padding: 1rem 1.1rem 1.15rem;
}

.uc-tasks .tm-projects-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}

.tm-workspace-meta {
  margin: 0 0 0.55rem;
  font-size: var(--uc-font-size-xs);
  color: var(--uc-text-muted);
}

.tm-workspace-meta:empty {
  display: none;
}

.uc-tasks .tm-project-detail__tasks-board {
  margin-top: 0.15rem;
}

.uc-tasks .tm-create-task__section {
  padding-top: 0.5rem;
}

/* ── Project create modal ── */
.tm-project-modal .modal-dialog {
  width: min(40rem, calc(100vw - 2rem));
  max-width: none;
  margin: 1.25rem auto;
}

.tm-project-modal .modal-content {
  border: 1px solid var(--tm-border);
  border-radius: var(--ws-radius);
  overflow: hidden;
  box-shadow: none;
}

.tm-project-modal .modal-header {
  padding: 0.9rem 1.1rem;
  background: var(--uc-surface-muted);
  border-bottom: 1px solid var(--tm-border);
}

.tm-project-modal .modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--uc-text);
}

.tm-project-modal .modal-body {
  padding: 1rem 1.1rem;
}

.tm-project-modal .modal-footer {
  padding: 0.75rem 1.1rem;
  background: var(--uc-surface-muted);
  border-top: 1px solid var(--tm-border);
}

.tm-project-modal .form-group label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--uc-text-muted);
}

.tm-project-modal .form-control {
  border-radius: var(--uc-radius-sm);
  border-color: var(--tm-border);
  font-size: var(--uc-font-size-sm);
}

/* ── Dashboard polish ── */
.uc-tasks .tm-dash__stats {
  gap: 0.75rem;
}

.uc-tasks .tm-dash__stat {
  border-radius: var(--ws-radius);
  text-decoration: none;
  transition: border-color 0.12s ease, transform 0.12s ease;
}

.uc-tasks a.tm-dash__stat:hover {
  border-color: var(--uc-brand-100);
  text-decoration: none;
  transform: translateY(-1px);
}

.uc-tasks .tm-dash__panel {
  border-radius: var(--ws-radius);
}

/* ── Tables ── */
.uc-tasks .uc-tasks__table-wrap {
  border-radius: var(--uc-radius-md);
  border: 1px solid var(--tm-table-border);
  overflow: hidden;
  background: var(--uc-surface);
}

.uc-tasks .uc-tasks__table thead th {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--uc-surface-muted);
}

/* ── Empty states ── */
.uc-tasks .tm-empty {
  border-radius: var(--ws-radius);
  border-style: dashed;
}

/* ── Created by me — checklist, details (card views) ── */
.uc-tasks .tm-task-card__checklist {
  list-style: none;
  margin: 0 0 0.65rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.uc-tasks .tm-task-card__checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--uc-font-size-xs);
  color: var(--uc-text);
  line-height: 1.45;
}

.uc-tasks .tm-task-card__checklist-item--done {
  color: var(--uc-text-muted);
}

.uc-tasks .tm-task-card__checklist-item--done .tm-task-card__checklist-text {
  text-decoration: line-through;
}

.uc-tasks .tm-task-card__checklist-icon {
  flex-shrink: 0;
  width: 1rem;
  color: var(--uc-brand-500);
  font-size: 0.85rem;
  line-height: 1.45;
}

.uc-tasks .tm-task-card__checklist-item--done .tm-task-card__checklist-icon {
  color: #059669;
}

.uc-tasks .tm-task-card__checklist-text {
  flex: 1;
  min-width: 0;
}

.uc-tasks .tm-task-card__checklist-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  flex-shrink: 0;
}

.uc-tasks .tm-task-card__checklist-info,
.uc-tasks .tm-task-card__checklist-file {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: var(--uc-radius-sm);
  background: var(--uc-surface);
  color: var(--uc-text-muted);
  cursor: pointer;
}

.uc-tasks .tm-task-card__checklist-info:hover,
.uc-tasks .tm-task-card__checklist-file:hover {
  background: var(--uc-brand-50);
  color: var(--uc-brand-600);
}

.uc-tasks .tm-task-card__details {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--tm-border);
}

.uc-tasks .tm-task-card__detail-row {
  display: grid;
  grid-template-columns: 5.75rem 1fr;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--uc-font-size-xs);
  line-height: 1.45;
}

.uc-tasks .tm-task-card__detail-label {
  margin: 0;
  font-weight: 600;
  color: var(--uc-text-muted);
}

.uc-tasks .tm-task-card__detail-value {
  margin: 0;
  color: var(--uc-text);
  word-break: break-word;
}

.tm-delete-modal__text {
  margin: 0;
  font-size: var(--uc-font-size-sm);
  color: var(--uc-text);
}

.tm-table-progress {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 5.5rem;
}

.tm-table-progress__track {
  flex: 1;
  height: 4px;
  border-radius: var(--uc-radius-full);
  background: var(--uc-surface-muted);
  overflow: hidden;
  min-width: 3rem;
}

.tm-table-progress__bar {
  height: 100%;
  border-radius: var(--uc-radius-full);
  background: var(--uc-brand-600);
  min-width: 0;
}

.tm-table-progress__label {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--uc-text-muted);
  min-width: 2rem;
  text-align: right;
}

.uc-tasks .tm-completed__stats,
.uc-tasks .tm-created-by-me__stats {
  margin-bottom: var(--ws-gap);
}

/* ===== theme/legacy-reset.css ===== */
/**
 * Tame legacy Quirk/Bootstrap styles inside the new task shell.
 */
.uc-tasks .row {
  margin-left: 0;
  margin-right: 0;
}

.uc-tasks .row::before,
.uc-tasks .row::after {
  display: none;
}

.uc-tasks [class*="col-"] {
  float: none;
  padding-left: 0;
  padding-right: 0;
}

.uc-tasks .alert {
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: var(--uc-radius-md);
  border: 1px solid var(--uc-border);
  font-size: var(--uc-font-size-sm);
  background: var(--uc-surface-muted) !important;
  color: var(--uc-text-muted);
}

.uc-tasks .alert-warning {
  border-color: #fde68a;
  background: #fffbeb !important;
  color: #92400e;
}

.uc-tasks .alert .alert-link {
  color: var(--uc-brand-700);
  font-weight: 600;
}

.uc-tasks .btn-xs,
.uc-tasks .btn-sm {
  padding: 0.2rem 0.45rem;
  font-size: 11px;
  line-height: 1.4;
  border-radius: var(--uc-radius-sm);
  border: none;
  box-shadow: none;
}

.uc-tasks .timeline-box .btn-xs {
  background: var(--uc-surface-muted) !important;
  color: var(--uc-text-muted) !important;
  border: 1px solid var(--uc-border) !important;
}

.uc-tasks .timeline-box .btn-xs.todo-done,
.uc-tasks .timeline-box .btn-xs[class*="todo-done"] {
  background: #ecfdf5 !important;
  color: var(--uc-success) !important;
  border-color: #a7f3d0 !important;
}

.uc-tasks .timeline-box .btn-xs.undo-todo {
  background: #fff7ed !important;
  color: var(--uc-warning) !important;
  border-color: #fed7aa !important;
}

.uc-tasks .timeline-box a.btn[style*="3677b0"],
.uc-tasks .timeline-box a.btn[style*="background: #3677b0"] {
  background: var(--uc-brand-600) !important;
  color: #fff !important;
  border: none !important;
  height: auto !important;
  width: auto !important;
  padding: 0.3rem 0.65rem !important;
  font-size: 11px !important;
  font-weight: 600;
}

.uc-tasks .timeline-box h1.tooltips {
  margin: 0;
  font-size: 13px !important;
  font-weight: 700;
  line-height: 1;
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--uc-radius-full);
  background: var(--uc-surface-muted);
  border: 1px solid var(--uc-border);
}

.uc-tasks .timeline-box h1.tooltips[style*="color:green"] {
  color: var(--uc-success) !important;
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.uc-tasks .timeline-box h1.tooltips[style*="color:orange"] {
  color: var(--uc-warning) !important;
  background: #fffbeb;
  border-color: #fde68a;
}

.uc-tasks .timeline-box h1.tooltips[style*="color:red"] {
  color: var(--uc-danger) !important;
  background: #fef2f2;
  border-color: #fecaca;
}

.uc-tasks .timeline-box ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.uc-tasks .timeline-box li {
  list-style: none;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--uc-border);
  font-size: var(--uc-font-size-sm);
}

.uc-tasks .timeline-box li:last-child {
  border-bottom: none;
}

.uc-tasks .box-footer {
  font-size: var(--uc-font-size-xs);
  color: var(--uc-text-muted);
  margin-top: 0.5rem;
}

.uc-tasks .modal-title {
  font-size: var(--uc-font-size-lg);
  font-weight: 600;
}

.uc-tasks .modal-body p {
  font-size: var(--uc-font-size-sm);
}

/* Flat surfaces — borders instead of drop shadows */
.uc-tasks .panel,
.uc-tasks .panel-body,
.uc-tasks .panel-heading,
.uc-tasks .panel-footer,
.uc-tasks .well,
.uc-tasks .thumbnail,
.uc-tasks .dash_card,
.uc-tasks .dash_card1,
.uc-tasks .dash_card2,
.uc-tasks .dash_card3,
.uc-tasks .tm-dash__stat,
.uc-tasks .tm-dash__panel,
.uc-tasks .tm-project-card,
.uc-tasks .tm-task-card,
.uc-tasks .lh-card,
.uc-tasks .modal-content,
.uc-tasks .tm-empty {
  box-shadow: none !important;
}

.uc-tasks .panel,
.uc-tasks .well,
.uc-tasks .thumbnail,
.uc-tasks .dash_card,
.uc-tasks .dash_card1,
.uc-tasks .dash_card2,
.uc-tasks .dash_card3,
.uc-tasks .lh-card {
  border: 1px solid var(--uc-border) !important;
}

.uc-tasks .btn,
.uc-tasks .btn-default,
.uc-tasks .btn-primary {
  box-shadow: none !important;
}

.uc-tasks .lh-topbar__cta--muted {
  box-shadow: none !important;
}

.uc-tasks .tm-task-card .box-item,
.uc-tasks .tm-task-card .box-content .box-item {
  font-size: var(--uc-font-size-sm);
  color: var(--uc-text);
  line-height: 1.45;
  margin-bottom: 0.35rem;
}

.uc-tasks .tm-form label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: var(--uc-font-size-sm);
  font-weight: 600;
  color: var(--uc-text);
}

.uc-tasks .tm-form .form-group {
  margin-bottom: 0.85rem;
}

.uc-tasks .tm-form__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (max-width: 575px) {
  .uc-tasks .tm-form__row {
    grid-template-columns: 1fr;
  }
}

.uc-tasks .tm-form__inline {
  display: flex;
  gap: 0.5rem;
}

.uc-tasks .tm-form__inline .form-control {
  flex: 1;
}

.uc-tasks .tm-form__todo-list {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}

.uc-tasks .tm-form__actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.25rem;
}

.uc-tasks .tm-dept-card__meta {
  margin: 0;
  font-size: var(--uc-font-size-xs);
  color: var(--uc-text-muted);
}

/* ===== theme/auth.css ===== */
body.auth-page {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text-primary);
  background: #f8fafc;
  background-image: 
    radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(29, 78, 216, 0.05) 0%, transparent 50%);
}

.auth-shell {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  grid-template-columns: minmax(400px, 1.1fr) minmax(420px, 0.9fr);
}

/* —— Brand panel —— */
.auth-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  padding: clamp(2rem, 5vw, 3.5rem);
  background: var(--uc-brand-800, #1e40af);
  color: #ffffff;
  overflow: hidden;
}

.auth-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../images/slide1.jpg") 68% center / cover no-repeat;
  opacity: 0.54;
  transform: scale(1.02);
  filter: saturate(0.82) brightness(0.9) contrast(1.06);
  pointer-events: none;
}

.auth-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      108deg,
      rgba(15, 23, 42, 0.84) 0%,
      rgba(15, 23, 42, 0.72) 26%,
      rgba(30, 58, 138, 0.52) 48%,
      rgba(29, 78, 216, 0.34) 68%,
      rgba(37, 99, 235, 0.2) 86%,
      rgba(59, 130, 246, 0.12) 100%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, transparent 24%),
    linear-gradient(to top, rgba(15, 23, 42, 0.38) 0%, transparent 26%),
    radial-gradient(ellipse 90% 70% at 12% 18%, rgba(255, 255, 255, 0.06) 0%, transparent 58%);
  pointer-events: none;
}

.auth-brand > * {
  position: relative;
  z-index: 2;
}

.auth-brand-header {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.auth-brand-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 16px;
  padding: 6px;
  box-shadow: none;
}

.auth-brand-title {
  margin: 0.15rem 0 0;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.auth-brand-subtitle {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.8;
}

.auth-brand-body {
  max-width: 32rem;
}

.auth-brand-headline {
  margin: 0 0 1.1rem;
  font-size: clamp(2rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.auth-brand-tagline {
  margin: 0 0 2.5rem;
  font-size: 1.08rem;
  line-height: 1.7;
  opacity: 0.9;
  max-width: 28rem;
}

.auth-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.auth-features li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-size: 0.96rem;
  line-height: 1.5;
}

.auth-features li strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.auth-features li span {
  display: block;
  opacity: 0.86;
  font-size: 0.92rem;
  line-height: 1.5;
}

.auth-feature-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  position: relative;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
}

.auth-feature-icon > .fa {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem;
  line-height: 1;
}

.auth-brand-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.auth-brand-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 7rem;
  padding: 0.85rem 1.1rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.13);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
}

.auth-brand-stat__value {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.auth-brand-stat__label {
  font-size: 0.7rem;
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auth-brand-footer {
  margin: 0;
  font-size: 0.82rem;
  opacity: 0.7;
}

/* —— Form panel —— */
.auth-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 5vw, 3.5rem);
  overflow: hidden;
}

.auth-panel__bg {
  position: absolute;
  inset: 0;
  background: #f8fafc;
  pointer-events: none;
}

.auth-panel__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 15% 15%, rgba(59, 130, 246, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 85% 85%, rgba(29, 78, 216, 0.03) 0%, transparent 50%);
  opacity: 0.8;
}

.auth-form-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  animation: auth-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes auth-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-mobile-hero {
  display: none;
}

.auth-card__head {
  margin-bottom: 1.5rem;
}

.auth-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
  padding: 0.3rem 0.65rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 999px;
}

.auth-card__eyebrow-icon {
  width: 11px;
  height: 11px;
  color: #2563eb;
}

.auth-card__title {
  margin: 0 0 0.45rem;
  font-size: clamp(1.5rem, 3vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #0f172a;
  line-height: 1.15;
}

.auth-card__lead {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #64748b;
}

.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  margin-bottom: 1.25rem;
  border-radius: 12px;
  font-size: 0.92rem;
  line-height: 1.45;
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  animation: auth-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes auth-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.auth-alert i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.1rem;
}

.auth-alert--success {
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}

.auth-field {
  margin-bottom: 1.15rem;
}

.auth-label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1e293b;
  letter-spacing: -0.01em;
}

.auth-input-wrap {
  display: flex;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-input-wrap:hover {
  border-color: #cbd5e1;
}

.auth-input-wrap:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.auth-input-icon {
  flex: 0 0 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  color: #94a3b8;
  font-size: 0.875rem;
  line-height: 1;
  pointer-events: none;
  transition: color 0.2s ease;
}

.auth-input-wrap:focus-within .auth-input-icon {
  color: #2563eb;
}

.auth-input {
  flex: 1;
  min-width: 0;
  width: auto;
  padding: 0.45rem 0;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.25;
  text-align: left;
  color: #0f172a;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transition: none;
}

.auth-input-wrap:not(.auth-input-wrap--password)::after {
  content: "";
  flex: 0 0 2.25rem;
}

.auth-input-wrap--password .auth-input {
  padding-right: 0;
}

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

.auth-input:focus {
  outline: none;
}

.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #0f172a;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
  box-shadow: 0 0 0 1000px #ffffff inset;
  transition: background-color 5000s ease-in-out 0s;
}

.auth-toggle-password {
  flex: 0 0 2.25rem;
  align-self: stretch;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #64748b;
  border-radius: 6px;
  cursor: pointer;
  z-index: 2;
  transition: all 0.2s ease;
}

.auth-toggle-password > .fa {
  display: block;
  font-size: 0.9rem;
  line-height: 1;
}

.auth-toggle-password:hover {
  color: #1e293b;
  background: rgba(15, 23, 42, 0.04);
}

.auth-toggle-password:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.35rem 0 1.5rem;
  flex-wrap: wrap;
}

.auth-checkbox {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  font-size: 0.88rem;
  color: #475569;
  user-select: none;
  transition: color 0.2s ease;
}

.auth-checkbox:hover {
  color: #1e293b;
}

.auth-checkbox input {
  width: 1rem;
  height: 1rem;
  accent-color: #2563eb;
  cursor: pointer;
}

.auth-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
  transition: color 0.2s ease;
  position: relative;
}

.auth-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.25s ease;
}

.auth-link:hover {
  color: #1d4ed8;
}

.auth-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.auth-submit {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.25rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.auth-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.auth-submit:hover::before {
  opacity: 1;
}

.auth-submit__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.2);
}

.auth-submit:hover:not(:disabled) .auth-submit__icon {
  transform: translateX(2px);
}

.auth-submit:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
}

.auth-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.auth-submit:disabled .auth-submit__icon {
  display: none;
}

.auth-spinner {
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: auth-spin 0.65s linear infinite;
}

.auth-spinner[hidden] {
  display: none;
}

@keyframes auth-spin {
  to { transform: rotate(360deg); }
}

.auth-features-footer {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e2e8f0;
}

.auth-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.auth-trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #475569;
}

.auth-trust__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: #059669;
}

.auth-trust i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  color: #059669;
  font-size: 0.85rem;
  line-height: 1;
}

/* Font Awesome 4 glyphs render on ::before — center inside auth slots */
.auth-page .auth-input-icon::before,
.auth-page .auth-feature-icon > .fa::before,
.auth-page .auth-toggle-password > .fa::before,
.auth-page .auth-trust i::before,
.auth-page .auth-alert i::before,
.auth-page .auth-submit__icon::before {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}

.auth-form-footnote {
  margin: 1.5rem 0 0;
  font-size: 0.86rem;
  color: #64748b;
  text-align: center;
  line-height: 1.55;
}

/* Legacy class aliases */
.auth-form-mobile-brand,
.auth-form-heading,
.auth-form-subheading {
  display: none;
}

@media (max-width: 960px) {
  .auth-shell {
    grid-template-columns: 1fr;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .auth-brand {
    display: none;
  }

  .auth-panel {
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(1.5rem, 5vw, 2.5rem) clamp(1.25rem, 4vw, 2rem);
  }

  .auth-panel__bg {
    background: #f8fafc;
  }

  .auth-panel__bg::after {
    opacity: 0.8;
    mask-image: none;
  }

  .auth-form-wrap {
    max-width: 460px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }

  .auth-mobile-hero {
    display: none;
  }
}

@media (max-width: 480px) {
  .auth-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
  }

  .auth-trust {
    flex-direction: column;
    gap: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-form-wrap,
  .auth-alert {
    animation: none;
  }

  .auth-submit,
  .auth-input,
  .auth-toggle-password,
  .auth-link,
  .auth-link::after,
  .auth-submit::before,
  .auth-submit__icon {
    transition: none;
  }

  .auth-spinner {
    animation-duration: 1s;
  }
}

/* ===== theme/chat.css ===== */
#loader-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    /* Semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    /* Make sure it's on top of other content */
}

#loader {
    border: 4px solid var(--uc-brand-600, #1e4091);
    /* Loader color */
    border-top: 4px solid #f3f3f3;
    /* Background color */
    border-radius: 50%;
    width: 70px;
    height: 70px;
    animation: spin 1s linear infinite;
    /* Animation for spinning */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#floating-button {
    position: fixed;
    bottom: calc(var(--uc-footer-height, 40px) + 8px);
    right: 16px;
    background-color: var(--uc-brand-600, #2563eb);
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1010;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: none;
    opacity: 0.92;
    transition: opacity 0.15s ease;
}

#floating-button:hover {
    opacity: 1;
}

#floating-button i {
    font-size: 20px !important;
}

#floating-home-button {
    position: fixed;
    bottom: 120px;
    right: 20px;
    background-color: #e93a3a;
    color: #fff;
    padding: 13px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
}

#chat-container,
#conversation-container,
#gchat-container,
#gconversation-container {
    display: none;
    position: fixed;
    flex-direction: column;
    bottom: 120px;
    right: 20px;
    width: 23%;
    background-color: #f7f7f7;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid var(--uc-border, #e2e8f0);
    box-shadow: none;
    z-index: 10000;
}

@media only screen and (max-width: 600px) {

    #floating-button {
        right: 12px;
        bottom: calc(var(--uc-footer-height, 40px) + 12px);
    }

    #chat-container,
    #conversation-container {
        width: 100%;
        height: 100%;
        bottom: 0;
        right: 0;
        border-radius: 0px;
        flex-direction: column;
        /* You may need to include this line in the media query */
    }

    #gchat-container,
    #gconversation-container {
        width: 100%;
        height: 100%;
        bottom: 0;
        right: 0;
        border-radius: 0px;
        flex-direction: column;
        /* You may need to include this line in the media query */
    }

    .headerpanel {
        background: var(--uc-brand-600, #1e4091);
    }

    .search-box button {
        background-color: #192b5a;
        color: #fff;
    }

    .btn-logged,
    .caret {
        color: white;
    }
}

@media only screen and (min-width: 600px) and (max-width: 1200px) {

    #chat-container,
    #conversation-container {
        width: 50%;
    }

    #gchat-container,
    #gconversation-container {
        width: 50%;
    }
}

.chat-container,
.conversation {
    display: flex;
    flex-direction: column;
    height: 72%;
}

.gchat-container,
.gconversation {
    display: flex;
    flex-direction: column;
    height: 72%;
}

@media only screen and (max-width: 600px) {
    .conversation {
        height: 100%;
    }

    .gconversation {
        height: 100%;
    }

    .seaarch {
        width: 150%;
    }
}

.nav-bar {
    background-color: var(--uc-brand-600, #1e4091);
    color: white;
    padding: 12px;
    text-align: center;
    font-size: 18px;
    box-shadow: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.back-button {
    margin: 0px;
    padding: 0px;
    cursor: pointer;
}

.back-button::before {
    content: '\2190';
    /* Unicode character for left arrow */
    font-size: 20px;
}

.chat,
.back-button {
    margin-left: 10px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

.chat:last-child,
.back-button {
    border-bottom: none;
}

.conversation {
    display: flex;
    flex-direction: column;
    height: 72%;
}

.gconversation {
    display: flex;
    flex-direction: column;
    height: 72%;
}

.message-container {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    background-color: #f7f7f7;
    flex-direction: column-reverse;
    display: flex;
}

.message-bubble {
    margin-bottom: 5px;
    max-width: 70%;
    padding: 10px;
    border-radius: 8px;
    word-wrap: break-word;
}

.user-message {
    align-self: flex-end;
    background-color: var(--uc-brand-600, #1e4091);
    color: #fff;
}

.bot-message {
    align-self: flex-start;
    background-color: #2ecc71;
    color: #fff;
}

.input-box {
    display: flex;
    padding: 15px;
    background-color: #fff;
    border-top: 1px solid var(--uc-brand-600, #1e4091);

}

input[type="text"] {
    flex-grow: 1;
    padding: 10px;
    border-radius: 5px;
    outline: none;
}

.send-button {
    background-color: var(--uc-brand-600, #1e4091);
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 5px;
    margin-left: 10px;
    cursor: pointer;
    outline: none;
}


.chat_nav {
    background-color: #fff;
    overflow: hidden;
    display: flex;
    justify-content: space-evenly;
    box-shadow: none;
    border-top: 1px solid var(--uc-border, #e2e8f0);
    bottom: 0;
    position: absolute;
    width: 100%;
    z-index: 100;
}

nav a {
    display: flex;
    color: #464646;
    text-align: center;
    padding: 14px 0;
    text-decoration: none;
    flex: 1;
    transition: background-color 0.3s, color 0.3s;
    font-size: 12px;
    font-weight: bold;
    justify-content: center;
}

nav a:hover {
    background-color: var(--uc-brand-600, #1e4091);
    color: white;
}

nav a.active {
    background-color: var(--uc-brand-600, #1e4091);
    color: white;
}

.icon {
    margin-right: 8px;
}

/* Style for the content section */
.tab-contentt {}

/* Hide all tab content by default */
.tab-content>div {
    display: none;
}

/* Show the selected tab content */
#recent-chats-content {
    display: block;
}

.chat-item {
    display: flex;
    align-items: center;
    border-bottom: solid #e6e6e6 1px;
    cursor: pointer;
}

.user-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
}

.user-details {
    flex-grow: 1;
}

.user-details h5 {
    margin: 0;
    font-size: 13px;
}

.user-details p {
    margin: 0;
    color: #555;
    font-size: 12px;
}

.unread-count {
    background-color: #f60;
    color: #fff;
    padding: 4px 8px;
    border-radius: 50%;
    font-size: 9px;
    margin-right: 10px;
    font-weight: bold;
}

.online-dot {
    width: 10px;
    height: 10px;
    background-color: #28a745;
    border-radius: 50%;
    margin-right: 5px;
    flex-shrink: 0;
    /* Add this line to prevent the dot from shrinking */
}

/* Search Bar Styles */
.search-bar {
    margin: 5px;
}

.search-input {
    width: 100%;
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}

.search-input:focus {
    outline: none;
    border-color: #007bff;
}

.search-icon {
    margin-right: 10px;
    color: #555;
}

.message-bubble {
    max-width: 70%;
    padding: 10px;
    border-radius: 15px 15px 15px 0px;
    word-wrap: break-word;
    background: rgb(234, 240, 246);
    width: fit-content;
    color: black;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
}

.user-message {
    background-color: var(--uc-brand-600, #1e4091);
    border-radius: 15px 15px 0px 15px;
    color: white;
    align-self: flex-end;
    float: right;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
}

.date-divider {
    display: flex;
    align-self: center;
    background: #49c97b;
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-radius: 10px;
    color: white;
    margin: 10px;
    font-size: 10px;
}

.button-container {
    position: relative;
    display: inline-block;
    /* Ensures the container only takes the necessary width */
}

#unread-count-badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: red;
    /* Set the background color as needed */
    color: white;
    /* Set the text color as needed */
    border-radius: 50%;
    /* Optional: Round the corners for a circular badge */
    padding: 5px 8px;
    /* Adjust padding as needed */
    font-size: 12px;
    /* Adjust font size as needed */
}

.typing-indicator {
    display: flex;
    justify-content: start;
    align-items: start;
}

.typing-indicator span {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: radial-gradient(circle, #465db8, var(--uc-brand-600, #1e4091));
    border-radius: 50%;
    margin: 0 3px;
    animation: wave 1.5s infinite;
}

.typing-indicator span:nth-child(2) {
    animation-delay: 0.3s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes wave {

    0%,
    50%,
    100% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-8px);
    }
}

.skeleton-loader {
    background: #f0f0f0;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
}

label.switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 18px;
}

label.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 4px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: #2196F3;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
    transform: translateX(12px);
}

.skeleton-panel {
    height: 20px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    margin-bottom: 10px;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ===== theme/daily-planner.css ===== */
/* Daily personal planner — right slide drawer */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Analytics tab — dark slate, distinct from chat blue */
.daily-planner-tab {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 2215;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem 0.55rem 0.7rem 0.65rem;
    min-width: 3.5rem;
    border: 1px solid #334155;
    border-right: none;
    border-radius: 10px 0 0 10px;
    background: #1e293b;
    color: #f1f5f9;
    cursor: pointer;
    box-shadow: none;
    overflow: hidden;
    transition:
        transform 0.22s ease,
        opacity 0.18s ease,
        border-color 0.15s ease,
        background 0.15s ease;
}

.daily-planner-tab:hover,
.daily-planner-tab:focus {
    transform: translate(-3px, -50%);
    border-color: #6366f1;
    background: #334155;
    outline: none;
}

.daily-planner-tab--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(100%, -50%);
}

.daily-planner-tab--hidden:hover,
.daily-planner-tab--hidden:focus {
    transform: translate(100%, -50%);
}

.daily-planner-tab__accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #334155;
}

.daily-planner-tab__accent::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--planner-progress, 0%);
    background: #818cf8;
    transition: height 0.3s ease;
}

.daily-planner-tab--complete .daily-planner-tab__accent::after {
    background: #4ade80;
}

.daily-planner-tab--alert .daily-planner-tab__accent::after {
    background: #6366f1;
}

.daily-planner-tab--empty .daily-planner-tab__accent::after {
    height: 0;
}

.daily-planner-tab__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
    font-size: 13px;
    line-height: 1;
}

.daily-planner-tab--complete .daily-planner-tab__icon {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}

.daily-planner-tab__label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    line-height: 1;
}

.daily-planner-tab__ring {
    --planner-progress: 0%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    background: conic-gradient(#818cf8 var(--planner-progress), #475569 0);
}

.daily-planner-tab--complete .daily-planner-tab__ring {
    background: conic-gradient(#4ade80 var(--planner-progress), #334155 0);
}

.daily-planner-tab--empty .daily-planner-tab__ring {
    background: #334155;
}

.daily-planner-tab__ring::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #1e293b;
}

.daily-planner-tab__pct {
    position: relative;
    z-index: 1;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    color: #c7d2fe;
    letter-spacing: -0.02em;
}

.daily-planner-tab--complete .daily-planner-tab__pct {
    color: #86efac;
}

.daily-planner-tab--empty .daily-planner-tab__pct {
    color: #64748b;
}

.daily-planner-tab__ratio {
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    color: #e2e8f0;
    letter-spacing: 0.01em;
}

.daily-planner-tab__hint {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1rem;
    border-radius: 999px;
    background: #334155;
    color: #64748b;
    font-size: 8px;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
}

.daily-planner-tab:hover .daily-planner-tab__hint,
.daily-planner-tab:focus .daily-planner-tab__hint {
    background: rgba(99, 102, 241, 0.25);
    color: #a5b4fc;
}

.daily-planner-tab--alert {
    border-color: #6366f1;
}

.daily-planner-tab--complete {
    border-color: #22c55e;
}

/* Full-height slide drawer — above appbar (2000) and sidebar (1990) */
.daily-planner-stack {
    position: fixed;
    inset: 0;
    z-index: 2200;
    pointer-events: none;
}

.daily-planner-stack--open {
    pointer-events: auto;
}

.daily-planner-backdrop {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.daily-planner-backdrop--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.daily-planner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: min(380px, 100vw);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border-left: 1px solid var(--uc-border, #e2e8f0);
    background: #fff;
    box-shadow: none;
    z-index: 2;
    overflow: hidden;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.28s ease, visibility 0.28s ease;
}

.daily-planner--open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
}

body.daily-planner-drawer-open {
    overflow: hidden;
}

.daily-planner__head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--uc-border, #e2e8f0);
    flex-shrink: 0;
}

.daily-planner__head-main {
    flex: 1;
    min-width: 0;
}

.daily-planner__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--uc-text, #0f172a);
    line-height: 1.35;
}

.daily-planner__meta {
    margin: 0.25rem 0 0;
    font-size: 12px;
    color: var(--uc-text-muted, #64748b);
}

.daily-planner__close {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--uc-border, #e2e8f0);
    border-radius: var(--uc-radius-sm, 6px);
    background: #fff;
    color: var(--uc-text-muted, #64748b);
    cursor: pointer;
}

.daily-planner__close:hover,
.daily-planner__close:focus {
    color: var(--uc-text, #0f172a);
    border-color: #cbd5e1;
    background: #f8fafc;
    outline: none;
}

.daily-planner__progress {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--uc-border, #e2e8f0);
    flex-shrink: 0;
}

.daily-planner__progress-track {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.daily-planner__progress-pct {
    flex-shrink: 0;
    min-width: 2rem;
    font-size: 11px;
    font-weight: 600;
    color: var(--uc-text-muted, #64748b);
    text-align: right;
}

.daily-planner__progress-bar {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--uc-brand-600, #2563eb);
    transition: width 0.25s ease;
}

.daily-planner__progress-bar--full {
    background: #16a34a;
}

.daily-planner__carry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--uc-border, #e2e8f0);
    background: #f8fafc;
    flex-shrink: 0;
}

.daily-planner__carry p {
    margin: 0;
    font-size: 12px;
    color: var(--uc-text-muted, #64748b);
    line-height: 1.4;
}

.daily-planner__carry-btn {
    flex-shrink: 0;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--uc-border, #e2e8f0);
    border-radius: var(--uc-radius-sm, 6px);
    background: #fff;
    color: var(--uc-text, #0f172a);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.daily-planner__carry-btn:hover,
.daily-planner__carry-btn:focus {
    background: #f1f5f9;
    outline: none;
}

.daily-planner__add {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--uc-border, #e2e8f0);
    flex-shrink: 0;
}

.daily-planner__input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--uc-border, #e2e8f0);
    border-radius: var(--uc-radius-sm, 6px);
    background: #fff;
    color: var(--uc-text, #0f172a);
    font-size: var(--uc-font-size-sm, 0.875rem);
}

.daily-planner__input:focus {
    outline: none;
    border-color: var(--uc-brand-500, #3b82f6);
}

.daily-planner__add-btn {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--uc-brand-600, #2563eb);
    border-radius: var(--uc-radius-sm, 6px);
    background: var(--uc-brand-600, #2563eb);
    color: #fff;
    cursor: pointer;
}

.daily-planner__add-btn:hover,
.daily-planner__add-btn:focus {
    background: var(--uc-brand-700, #1d4ed8);
    outline: none;
}

.daily-planner__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.5rem 1rem 1rem;
    background: #f8fafc;
}

.daily-planner__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.daily-planner__item {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.6rem 0.65rem;
    border: 1px solid var(--uc-border, #e2e8f0);
    border-radius: var(--uc-radius-sm, 6px);
    background: #fff;
}

.daily-planner__check-wrap {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    flex: 1;
    min-width: 0;
    margin: 0;
    cursor: pointer;
    font-weight: 400;
}

.daily-planner__check {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.daily-planner__check-ui {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    position: relative;
}

.daily-planner__check:checked + .daily-planner__check-ui {
    background: var(--uc-brand-600, #2563eb);
    border-color: var(--uc-brand-600, #2563eb);
}

.daily-planner__check:checked + .daily-planner__check-ui::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.daily-planner__text {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--uc-text, #0f172a);
    line-height: 1.45;
    word-break: break-word;
}

.daily-planner__item--done {
    background: #f8fafc;
}

.daily-planner__item--done .daily-planner__text {
    color: var(--uc-text-muted, #64748b);
    text-decoration: line-through;
}

.daily-planner__remove {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    border-radius: var(--uc-radius-sm, 6px);
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease, color 0.12s ease;
}

.daily-planner__item:hover .daily-planner__remove,
.daily-planner__remove:focus {
    opacity: 1;
}

.daily-planner__remove:hover,
.daily-planner__remove:focus {
    color: #dc2626;
    outline: none;
}

.daily-planner__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 6rem;
    padding: 1rem;
    text-align: center;
    color: var(--uc-text-muted, #64748b);
    font-size: 13px;
}

.daily-planner__empty p {
    margin: 0;
}

.daily-planner__foot {
    padding: 0.65rem 1rem;
    border-top: 1px solid var(--uc-border, #e2e8f0);
    background: #fff;
    flex-shrink: 0;
}

.daily-planner__clear {
    padding: 0;
    border: none;
    background: none;
    color: var(--uc-brand-600, #2563eb);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.daily-planner__clear:hover,
.daily-planner__clear:focus {
    text-decoration: underline;
    outline: none;
}

/* Chat FAB */
.uc-fab-stack {
    position: fixed;
    right: 16px;
    bottom: calc(var(--uc-footer-height, 40px) + 8px);
    z-index: 1010;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.uc-fab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    box-shadow: none;
    opacity: 0.92;
    transition: opacity 0.15s ease;
}

.uc-fab:hover,
.uc-fab:focus {
    opacity: 1;
    outline: none;
}

.uc-fab--chat {
    background: var(--uc-brand-600, #2563eb);
}

.uc-fab--chat:hover,
.uc-fab--chat:focus {
    background: var(--uc-brand-700, #1d4ed8);
}

.uc-fab i {
    font-size: 20px !important;
}

.uc-fab__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    border: 2px solid #fff;
    background: #1e293b;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 0.95rem;
    text-align: center;
}

#floating-button {
    position: static;
    width: 44px;
    height: 44px;
    padding: 0;
}

#unread-count-badge {
    top: -4px;
    right: -4px;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border: 2px solid #fff;
    font-size: 9px;
    line-height: 0.95rem;
}

.button-container {
    display: none;
}

#chat-container,
#conversation-container,
#gchat-container,
#gconversation-container {
    bottom: 48px;
}

@media only screen and (max-width: 600px) {
    .daily-planner {
        width: 100%;
    }

    .uc-fab-stack {
        right: 12px;
        bottom: calc(var(--uc-footer-height, 40px) + 12px);
    }

    #chat-container,
    #conversation-container,
    #gchat-container,
    #gconversation-container {
        bottom: 0;
    }

    .daily-planner__remove {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .daily-planner,
    .daily-planner-tab,
    .daily-planner-backdrop,
    .daily-planner-stack {
        transition: none;
    }
}

/* ===== theme/legacy-forms.css ===== */
/* Legacy search & form styles (non-theme pages) */

.search-box {
  display: flex;
  align-items: center;
}

.search-box:not(.uc-appbar__search) input[type="text"] {
  padding: 8px;
  border: none;
  border-radius: 20px;
  outline: none;
  font-size: 16px;
  background: #e8e8e8;
}

.search-box button {
  background-color: #ff6600;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  margin-left: 8px;
  cursor: pointer;
}

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}