/* style.css - Gentelella-inspired Admin Dashboard Theme */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Neutral Surfaces (Gentelella-style: cool light gray workspace) */
  --bg-primary: #F7F7F7;      /* Light gray app background */
  --bg-secondary: #ffffff;    /* Solid panel bg */
  --card-bg: #ffffff;
  --card-border: #E5E6E7;     /* Light gray border */
  --card-glow: rgba(0, 0, 0, 0.05);

  --text-primary: #2A3F54;    /* Sidebar navy, reused for headings */
  --text-secondary: #73879C;  /* Muted slate gray (classic Gentelella label color) */
  --text-muted: #A6B7C6;      /* Lighter slate */

  --accent-color: #1ABB9C;    /* Gentelella teal/green */
  --accent-gradient: #1ABB9C; /* Flat — no gradients */
  --accent-color-hover: #17A589;
  --accent-glow: rgba(26, 187, 156, 0.18);

  /* Side Navigation (dark navy rail, Gentelella-style) */
  --sidenav-bg: #2A3F54;
  --sidenav-bg-hover: #24344A;
  --sidenav-text: #A6B7C6;
  --sidenav-text-active: #ffffff;
  --sidenav-border: rgba(255, 255, 255, 0.06);
  --sidenav-width: 264px;

  /* Status Colors */
  --status-new: #0F6FB0;
  --status-new-bg: #E7F1FA;
  --status-new-text: #0A557F;

  --status-inprogress: #B15C00;
  --status-inprogress-bg: #FCF0DE;
  --status-inprogress-text: #8A4700;

  --status-resolved: #2E7D46;
  --status-resolved-bg: #E9F5EC;
  --status-resolved-text: #1F5C32;

  --status-closed: #6B6259;
  --status-closed-bg: #F0ECE5;
  --status-closed-text: #4A433C;

  /* Severity Colors */
  --sev-low: #2E7D46;
  --sev-medium: #0F6FB0;
  --sev-high: #B15C00;
  --sev-critical: #C74634;

  /* Category / Type Colors */
  --type-error: #C74634;
  --type-question: #0F6FB0;
  --type-performance: #B15C00;
  --type-request: #2E7D46;
  --type-others: #7A4FA3;

  /* Universal Badge Colors — the only 4 colors selectable as "Badge Color"
     for Issue Status / Severity Level / Problem Type in Master Setup. */
  --status-info: #0F6FB0;
  --status-info-bg: #E7F1FA;
  --status-info-text: #0A557F;

  --status-warning: #B15C00;
  --status-warning-bg: #FCF0DE;
  --status-warning-text: #8A4700;

  --status-error: #C74634;
  --status-error-bg: rgba(199, 70, 52, 0.12);
  --status-error-text: #C74634;

  --status-success: #2E7D46;
  --status-success-bg: #E9F5EC;
  --status-success-text: #1F5C32;

  --type-info: var(--status-info);
  --type-warning: var(--status-warning);
  --type-success: var(--status-success);

  /* Utility Dimensions */
  --header-height: 68px;

  /* Transitions */
  --transition-smooth: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  height: 100vh;
  display: flex;
  flex-direction: row;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--card-border);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Panel Containers */
.glass {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-top: 2px solid var(--accent-color);
  box-shadow: 0 1px 3px var(--card-glow);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* App Shell Layout: fixed left navigation rail (logo + nav + user actions),
   with the workspace filling the rest of the viewport to its right. */
#app-topnav {
  width: var(--sidenav-width);
  height: 100vh;
  background: var(--sidenav-bg);
  border-right: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 24px 16px;
  flex-shrink: 0;
  z-index: 10;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

#app-content {
  flex-grow: 1;
  min-height: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Top Nav Logo */
.topnav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 4px 8px 20px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--sidenav-border);
}

.logo-icon {
  width: 28px;
  height: 28px;
  background: var(--accent-gradient);
  border-radius: 4px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.logo-text {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #ffffff;
  white-space: nowrap;
}

/* Side Nav Links */
.topnav-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  flex-grow: 1;
  min-height: 0;
  overflow-y: auto;
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 11px 14px;
  border-radius: 3px;
  color: var(--sidenav-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  border-left: 3px solid transparent;
  transition: var(--transition-smooth);
  cursor: pointer;
}

.nav-link i {
  margin-right: 12px;
  font-size: 15px;
  width: 16px;
  text-align: center;
  opacity: 0.85;
}

.nav-link:hover {
  color: var(--sidenav-text-active);
  background: var(--sidenav-bg-hover);
}

.nav-link.active {
  background: var(--sidenav-bg-hover);
  color: var(--sidenav-text-active);
  border-left-color: var(--accent-color);
  font-weight: 700;
}

.user-avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 13px;
}

.header-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  flex-shrink: 0;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--sidenav-border);
}

/* User Session Pill (sits at the bottom of the dark side rail) */
.simulator-widget {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--sidenav-border);
  border-radius: 10px;
  padding: 10px 12px;
  gap: 10px;
  transition: all 0.3s ease;
}

.simulator-widget .btn-secondary {
  background: transparent;
  border-color: var(--sidenav-border);
  color: var(--sidenav-text);
}

.simulator-widget .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--sidenav-text-active);
  border-color: var(--sidenav-text);
}

.simulator-label {
  font-size: 12px;
  color: var(--sidenav-text);
  font-weight: 600;
  flex-grow: 1;
}

.simulator-label i {
  margin-right: 6px;
  color: var(--accent-color);
}

/* "My Active Tasks" notification bell in the user session widget — only
   shown (via JS toggling display:none) when the logged-in user has at
   least one, so the blink animation running unconditionally here never
   matters while it's hidden. */
.notification-bell-btn,
.notification-bell-btn i {
  /* Repeated on the icon itself (not just the button) because it now
     lives inside .simulator-label, and .simulator-label i's own color
     rule is more specific than relying on inherited color, so it would
     otherwise win and paint the bell the label's accent color instead
     of red. */
  color: #ff3b3b;
}

.notification-bell-btn {
  background: none;
  border: none;
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  margin-left: 6px;
  cursor: pointer;
  flex-shrink: 0;
  animation: notification-bell-blink 1.1s ease-in-out infinite;
}

.notification-bell-btn:hover,
.notification-bell-btn:hover i {
  color: #ff6b6b;
}

@keyframes notification-bell-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.simulator-select {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
}

.simulator-select option {
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* Main Workspace */
#main-view {
  flex-grow: 1;
  min-height: 0; /* required so overflow-y:auto actually scrolls instead of growing past the viewport */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable; /* keeps content from shifting when the scrollbar appears */
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

#main-view > * {
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Metric Cards Grid */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.metric-card {
  padding: 20px;
  border-radius: 2px;
  transition: var(--transition-smooth);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px var(--card-glow);
}

.metric-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--accent-color);
}

.metric-card.total-info::after { background: var(--status-info); }
.metric-card.overdue::after { background: var(--status-error); }
.metric-card.unassigned::after { background: var(--status-error); }
.metric-card.pending::after { background: var(--status-warning); }
.metric-card.resolved::after { background: var(--status-success); }

.metric-card:hover {
  transform: none;
  box-shadow: 0 2px 8px var(--card-glow);
  border-color: var(--accent-color);
}

.metric-title {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.metric-value-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.metric-value {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text-primary);
}

.metric-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 14px;
  transition: var(--transition-smooth);
}

.metric-card:hover .metric-icon-box {
  background: var(--accent-gradient);
  color: white;
}

/* Charts Grid */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
}

/* Admin Master Setup - List of Values selector + single-table manage panel */
.admin-lov-select {
  min-width: 300px;
  font-weight: 600;
}

.admin-manage-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 20px;
  align-items: start;
}

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

.chart-card {
  padding: 24px;
  border-radius: 2px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: 0 1px 2px var(--card-glow);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.chart-card:hover {
  border-color: var(--accent-color);
}

.chart-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chart-canvas-container {
  min-height: 200px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
}

/* SVG Chart Elements styling */
.donut-svg {
  width: 100%;
  max-width: 150px;
  height: auto;
}

.donut-text {
  fill: var(--text-primary);
}

.donut-count {
  font-size: 30px;
  font-weight: 700;
  fill: var(--text-primary);
}

.donut-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  fill: var(--text-muted);
  font-weight: 600;
}

.chart-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  flex-shrink: 0;
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  gap: 8px;
}

.legend-item-clickable {
  cursor: pointer;
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: 6px;
  transition: var(--transition-smooth);
}

.legend-item-clickable:hover {
  background: rgba(82, 82, 91, 0.08);
}

.legend-item-clickable:hover .legend-label {
  color: var(--text-primary);
}

.legend-color-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-label {
  color: var(--text-secondary);
  flex-grow: 1;
}

.legend-val {
  font-weight: 600;
  color: var(--text-primary);
}

/* Bar Chart styles */
.bar-chart-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.bar-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bar-row-clickable {
  cursor: pointer;
  padding: 4px 6px;
  margin: -4px -6px;
  border-radius: 8px;
  transition: var(--transition-smooth);
}

.bar-row-clickable:hover {
  background: rgba(82, 82, 91, 0.08);
}

.bar-row-clickable:hover .bar-label {
  color: var(--text-primary);
}

.bar-label-group {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 500;
}

.bar-label {
  color: var(--text-secondary);
}

.bar-value-text {
  color: var(--text-primary);
  font-weight: 600;
}

.bar-value-text small {
  color: var(--text-muted);
}

.bar-track {
  height: 6px;
  background: rgba(15, 23, 42, 0.08);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.1, 0.76, 0.55, 0.94);
}

/* Tooltip overlay styling */
.chart-tooltip {
  position: absolute;
  background: #0f172a;
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
  z-index: 10;
}

.no-chart-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  gap: 8px;
  text-align: center;
  font-size: 13px;
}

.no-data-icon {
  width: 36px;
  height: 36px;
  stroke: var(--text-muted);
  opacity: 0.5;
}

/* Filters & Tables Section */
.section-header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.filter-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  /* #main-view's children (including this row and .table-container right
     below it) each get #main-view > *'s fadeIn animation, which makes
     every one of them its own stacking context — so a z-index set deep
     inside here (e.g. .multi-select-panel's) only ranks against siblings
     within THIS stacking context, not against .table-container's. Without
     this, the table (later in DOM order, so painted after/above by
     default) always covers the multi-select filter panels' bottom half.
     Explicit z-index here settles the ordering between the two stacking
     contexts directly — works because #main-view's children are flex
     items, and z-index applies to flex items even without position set. */
  z-index: 5;
}

.filter-input-group {
  position: relative;
  min-width: 220px;
}

.filter-input-group i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 13px;
}

.search-field {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 8px 12px 8px 34px;
  color: var(--text-primary);
  outline: none;
  font-size: 13px;
  transition: var(--transition-smooth);
}

.search-field:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.select-filter {
  background: var(--bg-secondary);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 8px 14px;
  color: var(--text-primary);
  outline: none;
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.select-filter:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

/* Multi-select filter dropdown (Issues Log: Status / Problem Type /
   Severity / Raised By / Assignee) — a button styled like the other
   .select-filter dropdowns, opening a checkbox-list panel instead of a
   native <select>, since a native multi-select's ctrl/cmd-click UX isn't
   discoverable and can't show a friendly "N selected" summary. */
.multi-select-filter {
  position: relative;
  display: inline-block;
}

.multi-select-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.multi-select-btn i {
  font-size: 10px;
  opacity: 0.6;
}

.multi-select-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
}

.multi-select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
}

.multi-select-option:hover {
  background: var(--bg-secondary);
}

.multi-select-option input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

.multi-select-divider {
  border-top: 1px solid var(--card-border);
  margin: 4px 2px;
}

/* Buttons */
.btn-primary {
  background: var(--accent-gradient);
  color: white;
  border: 1px solid var(--accent-color);
  padding: 8px 16px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: var(--transition-smooth);
  box-shadow: none;
}

.btn-primary:hover {
  background: var(--accent-color-hover);
  border-color: var(--accent-color-hover);
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  background: var(--bg-secondary);
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
  padding: 8px 16px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition-smooth);
  box-shadow: none;
}

.btn-secondary:hover {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--text-muted);
  transform: none;
}

/* Table Area */
.table-container {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 2px;
  /* overflow-y stays hidden (just clips the rounded corners — vertical
     scrolling of the page itself is handled by #main-view). overflow-x is
     auto so a table with more columns than fit the card width gets its own
     horizontal scrollbar instead of squeezing every column unreadably thin
     or silently clipping the rightmost ones. */
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: 0 4px 20px -2px var(--card-glow);
  /* When used as a direct flex child of a scrollable flex-column container
     (e.g. #main-view on the Issues Log screen), an overflow:hidden flex item
     gets an automatic min-height of 0 per the flexbox spec and silently
     collapses/clips its content instead of forcing the ancestor to scroll.
     flex-shrink:0 keeps it pinned to its natural content height so the
     scrollbar shows up on the ancestor instead. */
  flex-shrink: 0;
}

.custom-table {
  width: 100%;
  /* Lets the table grow past the container's width when it has more columns
     than comfortably fit, instead of table-layout squeezing every column
     down to fit 100% — .table-container's overflow-x:auto then shows a
     horizontal scrollbar to reach the columns that don't fit. */
  min-width: max-content;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}

.custom-table th {
  background: #F3F5F6;
  padding: 12px 18px;
  font-weight: 700;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--card-border);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
}

.custom-table th.sortable-th {
  cursor: pointer;
  user-select: none;
  transition: var(--transition-smooth);
  white-space: nowrap;
}

.custom-table th.sortable-th:hover {
  color: var(--text-primary);
}

.custom-table th.sortable-th i {
  margin-left: 5px;
  font-size: 10px;
}

.custom-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--card-border);
  color: var(--text-primary);
  transition: var(--transition-smooth);
}

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

.custom-table tbody tr:hover {
  background: rgba(15, 23, 42, 0.03);
}

/* Clean status badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.badge-status-new { background: var(--status-new-bg); color: var(--status-new-text); }
.badge-status-inprogress { background: var(--status-inprogress-bg); color: var(--status-inprogress-text); }
.badge-status-resolved { background: var(--status-resolved-bg); color: var(--status-resolved-text); }
.badge-status-closed { background: var(--status-closed-bg); color: var(--status-closed-text); }

.badge-sev-low { background: var(--status-resolved-bg); color: var(--sev-low); }
.badge-sev-medium { background: var(--status-new-bg); color: var(--sev-medium); }
.badge-sev-high { background: var(--status-inprogress-bg); color: var(--sev-high); }
.badge-sev-critical { background: rgba(185, 28, 28, 0.12); color: var(--sev-critical); }

/* The 4 universal Badge Colors (Info / Warning / Error / Success) — shared
   by Issue Status, Severity Level, and Problem Type badges alike, since
   Master Setup now restricts "Badge Color" to just these 4 choices for all 3. */
.badge-status-info, .badge-sev-info, .badge-type-info { background: var(--status-info-bg); color: var(--status-info-text); }
.badge-status-warning, .badge-sev-warning, .badge-type-warning { background: var(--status-warning-bg); color: var(--status-warning-text); }
.badge-status-error, .badge-sev-error, .badge-type-error { background: var(--status-error-bg); color: var(--status-error-text); }
.badge-status-success, .badge-sev-success, .badge-type-success { background: var(--status-success-bg); color: var(--status-success-text); }

/* Legacy Problem Type badge colors (predate the 4-color system) — kept so
   Master Setup's Badge Color preview still renders correctly for any
   pre-existing record that hasn't been re-saved with a new color yet. */
.badge-type-question { background: var(--status-new-bg); color: var(--status-new-text); }
.badge-type-performance { background: var(--status-inprogress-bg); color: var(--status-inprogress-text); }
.badge-type-request { background: var(--status-resolved-bg); color: var(--status-resolved-text); }
.badge-type-others { background: rgba(109, 40, 217, 0.12); color: var(--type-others); }

.table-issue-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.action-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.action-icon-btn:hover {
  background: rgba(82, 82, 91, 0.08);
  color: var(--accent-color);
  border-color: var(--accent-color);
}

/* Modals */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background: var(--card-bg);
  width: 90%;
  max-width: 700px;
  max-height: 85vh;
  border-radius: 2px;
  border: 1px solid var(--card-border);
  box-shadow: 0 20px 40px -5px var(--card-glow);
  display: flex;
  flex-direction: column;
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
  overflow: hidden;
}

/* The <form> wrapping modal-body + modal-footer must also participate in
   the flex layout, otherwise it sizes to its content and the body below
   never gets a chance to scroll on its own. */
.modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.modal-backdrop.open .modal-content {
  transform: translateY(0);
}

/* Standalone issue tab (opened via UI.openIssueInNewTab): the Log/Edit
   Issue form fills the entire browser tab instead of floating as a
   dialog over a blurred backdrop. */
body.standalone-issue-mode {
  background: var(--bg-primary);
}

body.standalone-issue-mode #issue-modal {
  /* Stay position:fixed + inset:0 (inherited from .modal-backdrop) so this
     fully covers the dashboard rendered behind it in #app-content —
     switching to static here was the bug: it let the modal flow next to
     app-content instead of over it, leaving the dashboard visible on the
     right. */
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg-primary);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1;
  pointer-events: auto;
  /* Lay the form and the Activity panel out side by side, each filling
     the full tab height, instead of .modal-backdrop's default centered
     single dialog. */
  align-items: stretch;
  justify-content: flex-start;
}

body.standalone-issue-mode #issue-modal .modal-content {
  /* Defaults to an even 50:50 split with the Activity panel (see
     #issue-activity-panel below) — dragging .issue-panel-resizer then
     overrides the Activity panel's width with an inline pixel value,
     which this side's flex-grow/shrink absorbs automatically. */
  flex: 1 1 50%;
  min-width: 0;
  width: auto;
  max-width: 100%;
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  border: none;
  box-shadow: none;
  transform: none;
}

/* Activity Panel — hidden everywhere except the standalone Edit Issue
   tab (see UI.enterStandaloneIssueMode), and even there only once the
   issue actually exists (UI.enterStandaloneIssueMode sets an inline
   display:none in Log New Issue mode, since a brand-new issue has
   nothing to comment on yet). */
#issue-activity-panel {
  display: none;
}

body.standalone-issue-mode #issue-activity-panel {
  display: flex;
  flex-direction: column;
  /* Defaults to an even 50:50 split with the issue form (see
     .modal-content above) rather than a fixed width — dragging
     .issue-panel-resizer overrides this with an inline pixel width. */
  width: 50%;
  flex: 1 1 50%;
  min-width: 280px;
  max-width: 70vw;
  height: 100vh;
  border-left: 1px solid var(--card-border);
  background: #F9F9F9;
}

/* Drag handle between the issue form and the Activity panel — lets the
   user resize the split (see UI.bindActivityPanelResizer). Hidden
   whenever the panel itself is (normal popup, and Log New Issue mode). */
.issue-panel-resizer {
  display: none;
}

body.standalone-issue-mode .issue-panel-resizer {
  display: block;
  flex: 0 0 5px;
  width: 5px;
  height: 100vh;
  cursor: col-resize;
  background: var(--card-border);
  transition: background-color 0.15s ease;
}

.issue-panel-resizer:hover,
.issue-panel-resizer.dragging {
  background: var(--accent-color);
}

.activity-panel-header {
  flex-shrink: 0;
  padding: 16px 20px;
  border-bottom: 1px solid var(--card-border);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
}

.activity-panel-header i {
  color: var(--accent-color);
  margin-right: 8px;
}

.activity-feed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.activity-empty-note {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 24px 8px;
}

.activity-item {
  display: flex;
  gap: 10px;
}

.activity-item-body {
  flex: 1;
  min-width: 0;
}

.activity-item-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.activity-author {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
}

.activity-time {
  font-size: 11px;
  color: var(--text-muted);
}

.activity-reply-tag {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-primary);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 4px 8px;
  margin: 6px 0;
  display: inline-block;
}

.activity-reply-tag i {
  margin-right: 4px;
  color: var(--accent-color);
}

.activity-message {
  font-size: 13.5px;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 2px;
}

.activity-attachments {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

/* Reuses the same .attachment-item markup as the Description/Solution
   Attachments lists (see renderAttachmentsList) — scaled down slightly
   to fit the narrower Activity panel. */
.activity-attachments .attachment-item {
  padding: 6px 10px;
}

.activity-attachments .attachment-preview-box {
  width: 34px;
  height: 34px;
  font-size: 13px;
}

.activity-attachments .attachment-name {
  font-size: 12.5px;
  max-width: 200px;
}

.activity-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.activity-reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: var(--bg-primary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.activity-reaction-pill:hover {
  border-color: var(--accent-color);
}

.activity-reaction-pill:disabled {
  cursor: default;
}

.activity-reaction-pill-mine {
  border-color: var(--accent-color);
  background: var(--accent-glow);
  color: var(--accent-color);
  font-weight: 600;
}

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

.activity-reply-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.activity-reply-btn:hover {
  color: var(--accent-color);
}

.activity-delete-btn:hover {
  color: var(--sev-critical);
}

.activity-reply-btn i {
  margin-right: 4px;
}

.activity-reply-context {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 20px;
  background: var(--bg-primary);
  border-top: 1px solid var(--card-border);
  font-size: 12px;
  color: var(--text-secondary);
}

.activity-pending-attachments {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 20px;
}

.activity-pending-attachments:empty {
  display: none;
}

.activity-pending-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  background: var(--bg-primary);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 4px 10px;
  color: var(--text-secondary);
}

.activity-pending-chip button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
}

.activity-composer {
  flex-shrink: 0;
  border-top: 1px solid var(--card-border);
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.activity-composer-input {
  width: 100%;
  resize: vertical;
  min-height: 44px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--card-bg);
}

.activity-composer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.activity-send-btn {
  padding: 7px 16px;
}

/* Emoji picker — a small static grid of plain-text Unicode emoji (no
   images, no icon font, no external library) so it stays essentially
   free performance-wise; just toggled show/hide above its trigger button. */
.activity-emoji-picker {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 20;
  display: grid;
  /* minmax(0, 1fr), not plain 1fr — a plain 1fr column won't shrink below
     its content's min-content width, so once the emoji buttons' own
     padding pushed 8 columns past 224px, this grid silently overflowed
     horizontally. Combined with overflow-y:auto below (which per spec
     forces the other axis to "auto" too when left as the default
     "visible"), that overflow showed up as an unwanted horizontal
     scrollbar. minmax(0, 1fr) lets columns actually shrink to fit. */
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 2px;
  width: 224px;
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  box-shadow: 0 4px 20px -2px var(--card-glow);
}

.activity-emoji-picker-btn {
  border: none;
  background: none;
  font-size: 18px;
  line-height: 1;
  padding: 5px 0;
  width: 100%;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.activity-emoji-picker-btn:hover {
  background: rgba(82, 82, 91, 0.12);
}

.modal-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--card-border);
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.modal-close-btn:hover {
  color: var(--accent-color);
  transform: scale(1.1);
}

.modal-body {
  flex: 1;
  min-height: 0;
  padding: 24px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

/* Form Styles */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group-full {
  grid-column: span 2;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.form-control {
  background: var(--bg-secondary);
  border: 1px solid var(--card-border);
  border-radius: 3px;
  padding: 8px 12px;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  transition: var(--transition-smooth);
}

.form-control:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

/* Plain disabled fallback (used only by a couple of unrelated always-locked
   inputs elsewhere, e.g. Master Setup's fixed Value field) — works in
   browsers that actually let author CSS style :disabled. */
.form-control:disabled {
  background-color: #E5E7EA;
  opacity: 1;
  color: var(--text-secondary);
  cursor: not-allowed;
  transition: none;
}

/* Fields the current user isn't allowed to edit on the Issues Log's New/Edit
   Issue screens (e.g. Edit Issue's reporter-only fields when viewed by
   someone other than whoever raised it) — see UI.lockFormField(). A solid,
   clearly-opaque fill instead of the browser's default faded/translucent
   disabled look, so it reads unmistakably as "locked" rather than just
   low-contrast. Uses a plain class + readonly/pointer-events instead of the
   disabled attribute, since some browsers render :disabled controls with a
   hardcoded native appearance that author CSS can't reach.
   transition: none is deliberate — .form-control's background-color
   transition can otherwise get stuck mid-animation on the very first
   frame (e.g. a tab that isn't actively compositing pauses the
   transition), leaving the field looking un-locked even though the class
   and readonly state are correctly applied. */
.form-control.field-locked {
  background-color: #E5E7EA;
  color: var(--text-secondary);
  cursor: not-allowed;
  transition: none;
}

select.form-control.field-locked {
  pointer-events: none;
}

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

.modal-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--card-border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: var(--bg-secondary);
}

/* Security Management Screen */
.security-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  align-items: start;
}

.users-list-card {
  padding: 12px;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: 0 4px 20px -2px var(--card-glow);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-item-row {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition-smooth);
  gap: 10px;
  border: 1px solid transparent;
}

.user-item-row:hover {
  background: rgba(15, 23, 42, 0.05);
}

.user-item-row.active {
  background: rgba(82, 82, 91, 0.08);
  border-color: var(--accent-color);
}

.user-item-row.active .user-item-name {
  color: var(--accent-color);
}

.user-item-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.user-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.user-item-role {
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.permissions-card {
  padding: 24px;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: 0 4px 20px -2px var(--card-glow);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.permission-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.permission-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--bg-primary);
  border: 1px solid var(--card-border);
  transition: var(--transition-smooth);
}

.permission-project-title {
  font-weight: 600;
  font-size: 13px;
}

.permission-project-customer {
  font-size: 11px;
  color: var(--text-secondary);
}

/* Toggle Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--card-border);
  transition: .3s;
  border-radius: 20px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

input:checked + .slider {
  background: var(--accent-color);
}

input:checked + .slider:before {
  transform: translateX(20px);
}

.overdue-warning-text {
  color: var(--sev-critical);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Alert Notification toast styles */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}

.toast {
  padding: 12px 18px;
  border-radius: 8px;
  background: var(--text-primary);
  color: var(--bg-primary);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 250px;
  opacity: 0;
  animation: slide-in-toast 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slide-in-toast {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.toast.success { border-left: 3px solid var(--status-resolved); }
.toast.error { border-left: 3px solid var(--sev-critical); }
.toast.info { border-left: 3px solid var(--status-new); }

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

/* Responsive Adjustments */
@media (max-width: 1024px) {
  .security-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  /* Side rail collapses to a slim icon-only column; labels hide so the
     workspace keeps most of the width on narrow screens. */
  :root {
    --sidenav-width: 72px;
  }
  #app-topnav {
    padding: 16px 10px;
  }
  .topnav-logo {
    justify-content: center;
    padding-bottom: 16px;
  }
  .logo-text {
    display: none;
  }
  .logo-icon {
    margin-right: 0;
  }
  .nav-link {
    justify-content: center;
    padding: 12px 8px;
  }
  .nav-link i {
    margin-right: 0;
  }
  .nav-link-label {
    display: none;
  }
  .simulator-label {
    display: none;
  }
  .simulator-widget {
    justify-content: center;
  }
  #main-view {
    padding: 16px;
    gap: 20px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-group-full {
    grid-column: span 1;
  }
}

/* Login Screen */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-primary);
}

.login-card {
  width: 100%;
  max-width: 380px;
  padding: 36px 32px;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
}

.login-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.login-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.login-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.login-error {
  background: rgba(185, 28, 28, 0.08);
  color: var(--sev-critical);
  border: 1px solid rgba(185, 28, 28, 0.25);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  margin-top: 14px;
}

.login-submit-btn {
  width: 100%;
  justify-content: center;
  margin-top: 20px;
  padding: 10px;
}

/* Issue Attachments */
.attachment-upload-zone {
  display: flex;
  align-items: center;
  gap: 4px;
}

.attachment-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.attachment-empty-note {
  font-size: 12px;
  color: var(--text-muted);
  padding: 4px 0;
}

.attachment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--bg-primary);
}

.attachment-item-info {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.attachment-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  color: #ffffff;
}

.attachment-icon.icon-image { background: var(--status-new); }
.attachment-icon.icon-word { background: #2b579a; }
.attachment-icon.icon-excel { background: #217346; }
.attachment-icon.icon-file { background: var(--text-muted); }

/* --- Attachment Rough Previews --- */

/* The clickable thumbnail box shown per attachment row. Starts as a plain
   icon (fallback) and gets swapped for an actual rough preview once the
   file loads (image / pdf / excel / text / csv). */
.attachment-preview-box {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
  color: #ffffff;
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition-smooth);
  position: relative;
  background: var(--text-muted);
}

.attachment-preview-box:hover {
  transform: scale(1.07);
  box-shadow: 0 4px 12px var(--card-glow);
}

.attachment-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.attachment-preview-box.icon-image { background: var(--status-new); }
.attachment-preview-box.icon-word { background: #2b579a; }
.attachment-preview-box.icon-excel { background: #217346; }
.attachment-preview-box.icon-pdf { background: #b91c1c; }
.attachment-preview-box.icon-csv { background: #8a3f07; }
.attachment-preview-box.icon-text { background: #52606d; }
.attachment-preview-box.icon-file { background: var(--text-muted); }

/* Tiny scaled-down PDF first-page preview inside the thumbnail box */
.pdf-preview-frame {
  width: 160px;
  height: 200px;
  transform: scale(0.275);
  transform-origin: top left;
  pointer-events: none;
  background: #ffffff;
}
.pdf-preview-frame embed {
  width: 160px;
  height: 200px;
  border: none;
}

/* Tiny Excel table / text snippet crammed into the thumbnail box */
.excel-preview-mini,
.text-preview-mini {
  width: 100%;
  height: 100%;
  background: #ffffff;
  color: #222222;
  font-size: 4px;
  line-height: 1.15;
  padding: 2px;
  overflow: hidden;
  text-align: left;
  pointer-events: none;
}

.excel-preview-mini table {
  border-collapse: collapse;
  width: 100%;
}
.excel-preview-mini td,
.excel-preview-mini th {
  border: 0.5px solid #cccccc;
  padding: 0 1px;
  white-space: nowrap;
  overflow: hidden;
}

.text-preview-mini {
  font-family: 'Courier New', monospace;
  white-space: pre-wrap;
  word-break: break-all;
}

/* --- Attachment Preview Lightbox (bigger, on thumbnail click) --- */
.attachment-preview-modal-content {
  max-width: 820px;
  width: 92%;
}

.attachment-preview-full-image {
  max-width: 100%;
  max-height: 65vh;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}

.attachment-preview-full-pdf {
  width: 100%;
  height: 65vh;
  border: none;
  border-radius: 8px;
  background: #ffffff;
}

.excel-preview-full {
  overflow: auto;
  max-height: 65vh;
  background: #ffffff;
  border-radius: 8px;
  padding: 12px;
}
.excel-preview-full table {
  border-collapse: collapse;
  font-size: 12px;
  color: #222222;
}
.excel-preview-full td,
.excel-preview-full th {
  border: 1px solid #dddddd;
  padding: 4px 8px;
  white-space: nowrap;
}

.text-preview-full {
  background: var(--bg-primary);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 16px;
  max-height: 65vh;
  overflow: auto;
  font-size: 12px;
  font-family: 'Courier New', monospace;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-primary);
}

.attachment-preview-fallback-inline {
  font-size: 6px;
  color: #999999;
  padding: 2px;
}

.attachment-preview-loading,
.attachment-preview-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 20px;
  color: var(--text-muted);
  text-align: center;
}

.attachment-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.attachment-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.attachment-pending-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--status-inprogress-text);
  background: var(--status-inprogress-bg);
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}

.attachment-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Donut Segment Entry Animation */
@keyframes donutEntry {
  from {
    stroke-dashoffset: 440;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.donut-segment {
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
  animation: donutEntry 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}