@import url(../../../stylesheets/application.css);

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

/* ============================================================
   ECOGO REDMINE THEME — "Clean Corporate Emerald"
   ============================================================
   Calm, data-first, Linear/Notion-inspired. Near-white canvas,
   hairline borders, a single emerald `#10B981` accent carrying
   all interactive weight. Inter for UI, JetBrains Mono for IDs.
   No serif. No gradients. No decorative ornaments. Built for
   project managers who live in issue lists, Gantt charts, and
   dashboards all day.
   ============================================================ */

/* ── Light mode (default) ── */
:root {
  /* Brand — emerald */
  --eco-primary:           #10b981;
  --eco-primary-hover:     #059669;
  --eco-primary-active:    #047857;
  --eco-primary-subtle:    #ecfdf5;
  --eco-primary-soft:      #d1fae5;
  --eco-primary-rgb:       16, 185, 129;
  --eco-accent:            #10b981;

  /* Surfaces — zinc greys, warm neutral */
  --eco-surface:           #ffffff;              /* card / panel */
  --eco-surface-raised:    #fafafa;              /* app canvas (body bg) */
  --eco-surface-sunken:    #f4f4f5;              /* hover rows, input bg */
  --eco-surface-overlay:   rgba(16, 185, 129, 0.06);

  /* Borders — hairline */
  --eco-border:            #e4e4e7;
  --eco-border-strong:     #d4d4d8;

  /* Text — zinc scale, never pure black */
  --eco-text:              #09090b;
  --eco-text-secondary:    #52525b;
  --eco-text-muted:        #a1a1aa;

  /* Semantic colours */
  --eco-danger:            #dc2626;
  --eco-danger-subtle:     #fef2f2;
  --eco-warning:           #f59e0b;
  --eco-warning-subtle:    #fffbeb;
  --eco-success:           #10b981;
  --eco-success-subtle:    #ecfdf5;
  --eco-info:              #2563eb;
  --eco-info-subtle:       #eff6ff;

  /* Header — minimal white top bar */
  --eco-header-bg:         #ffffff;
  --eco-header-bg-deep:    #fafafa;
  --eco-header-text:       #09090b;
  --eco-header-dim:        #52525b;

  /* Shadows — near-invisible, hairline-card aesthetic */
  --eco-shadow-sm:         0 1px 2px 0 rgba(9, 9, 11, 0.04);
  --eco-shadow-md:         0 1px 3px 0 rgba(9, 9, 11, 0.05),
                           0 1px 2px -1px rgba(9, 9, 11, 0.04);
  --eco-shadow-lg:         0 4px 12px -4px rgba(9, 9, 11, 0.08),
                           0 2px 4px -2px rgba(9, 9, 11, 0.04);
  --eco-shadow-brand:      0 1px 2px 0 rgba(16, 185, 129, 0.20);

  /* Border radii — restrained */
  --eco-radius-sm:         4px;
  --eco-radius-md:         6px;
  --eco-radius-lg:         8px;
  --eco-radius-xl:         12px;
  --eco-radius-full:       9999px;

  /* Motion */
  --eco-transition:        0.15s cubic-bezier(0.4, 0, 0.2, 1);

  /* Typography — Inter workhorse + JetBrains Mono */
  --eco-font-display:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --eco-font-heading:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --eco-font-body:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --eco-font-mono:         'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Tracker colours — type-coded */
  --eco-tracker-bug:       #dc2626;
  --eco-tracker-feature:   #10b981;
  --eco-tracker-task:      #2563eb;
  --eco-tracker-support:   #a855f7;

  /* ── Status palette — muted, PM-friendly ──
     Calm colors scannable without shouting. Used for chips,
     Gantt bars, priority dots, and timeline markers. */
  --eco-status-new:        #52525b;   /* grey — new / open */
  --eco-status-progress:   #2563eb;   /* blue — in progress */
  --eco-status-review:     #f59e0b;   /* amber — feedback / review */
  --eco-status-done:       #10b981;   /* emerald — resolved */
  --eco-status-stuck:      #dc2626;   /* red — rejected / blocked */
  --eco-status-hold:       #a1a1aa;   /* light grey — closed / hold */

  /* Priority — dot + text, not filled chips */
  --eco-prio-low:          #a1a1aa;
  --eco-prio-normal:       #52525b;
  --eco-prio-high:         #f59e0b;
  --eco-prio-urgent:       #dc2626;
  --eco-prio-immediate:    #991b1b;
}

/* ── Dark mode — OS preference ── */
@media (prefers-color-scheme: dark) {
  :root {
    /* Brand — emerald stays, slightly lightened for contrast */
    --eco-primary:           #34d399;
    --eco-primary-hover:     #6ee7b7;
    --eco-primary-active:    #10b981;
    --eco-primary-subtle:    #022c22;
    --eco-primary-soft:      #064e3b;
    --eco-primary-rgb:       52, 211, 153;
    --eco-accent:            #34d399;

    /* Surfaces — near-black zinc */
    --eco-surface:           #18181b;
    --eco-surface-raised:    #09090b;
    --eco-surface-sunken:    #27272a;
    --eco-surface-overlay:   rgba(52, 211, 153, 0.06);

    /* Borders */
    --eco-border:            #27272a;
    --eco-border-strong:     #3f3f46;

    /* Text */
    --eco-text:              #fafafa;
    --eco-text-secondary:    #a1a1aa;
    --eco-text-muted:        #71717a;

    /* Semantic colours */
    --eco-danger:            #f87171;
    --eco-danger-subtle:     #450a0a;
    --eco-warning:           #fbbf24;
    --eco-warning-subtle:    #451a03;
    --eco-success:           #34d399;
    --eco-success-subtle:    #022c22;
    --eco-info:              #60a5fa;
    --eco-info-subtle:       #172554;

    /* Header — dark minimal bar */
    --eco-header-bg:         #18181b;
    --eco-header-bg-deep:    #09090b;
    --eco-header-text:       #fafafa;
    --eco-header-dim:        #a1a1aa;

    /* Shadows (deeper on dark surfaces) */
    --eco-shadow-sm:         0 1px 2px 0 rgba(0, 0, 0, 0.40);
    --eco-shadow-md:         0 1px 3px 0 rgba(0, 0, 0, 0.55),
                             0 1px 2px -1px rgba(0, 0, 0, 0.40);
    --eco-shadow-lg:         0 4px 12px -4px rgba(0, 0, 0, 0.60),
                             0 2px 4px -2px rgba(0, 0, 0, 0.40);
    --eco-shadow-brand:      0 1px 2px 0 rgba(52, 211, 153, 0.30);

    /* Tracker colours (lightened for dark bg) */
    --eco-tracker-bug:       #f87171;
    --eco-tracker-feature:   #34d399;
    --eco-tracker-task:      #60a5fa;
    --eco-tracker-support:   #c4b5fd;

    /* Status palette — dark mode */
    --eco-status-new:        #a1a1aa;
    --eco-status-progress:   #60a5fa;
    --eco-status-review:     #fbbf24;
    --eco-status-done:       #34d399;
    --eco-status-stuck:      #f87171;
    --eco-status-hold:       #71717a;
    --eco-prio-low:          #71717a;
    --eco-prio-normal:       #a1a1aa;
    --eco-prio-high:         #fbbf24;
    --eco-prio-urgent:       #f87171;
    --eco-prio-immediate:    #b91c1c;
  }
}

/* ── Dark mode — explicit data attribute (JS toggle) ── */
[data-theme="dark"] {
  --eco-primary:           #34d399;
  --eco-primary-hover:     #6ee7b7;
  --eco-primary-active:    #10b981;
  --eco-primary-subtle:    #022c22;
  --eco-primary-soft:      #064e3b;
  --eco-primary-rgb:       52, 211, 153;
  --eco-accent:            #34d399;

  --eco-surface:           #18181b;
  --eco-surface-raised:    #09090b;
  --eco-surface-sunken:    #27272a;
  --eco-surface-overlay:   rgba(52, 211, 153, 0.06);

  --eco-border:            #27272a;
  --eco-border-strong:     #3f3f46;

  --eco-text:              #fafafa;
  --eco-text-secondary:    #a1a1aa;
  --eco-text-muted:        #71717a;

  --eco-danger:            #f87171;
  --eco-danger-subtle:     #450a0a;
  --eco-warning:           #fbbf24;
  --eco-warning-subtle:    #451a03;
  --eco-success:           #34d399;
  --eco-success-subtle:    #022c22;
  --eco-info:              #60a5fa;
  --eco-info-subtle:       #172554;

  --eco-header-bg:         #18181b;
  --eco-header-bg-deep:    #09090b;
  --eco-header-text:       #fafafa;
  --eco-header-dim:        #a1a1aa;

  --eco-shadow-sm:         0 1px 2px 0 rgba(0, 0, 0, 0.40);
  --eco-shadow-md:         0 1px 3px 0 rgba(0, 0, 0, 0.55),
                           0 1px 2px -1px rgba(0, 0, 0, 0.40);
  --eco-shadow-lg:         0 4px 12px -4px rgba(0, 0, 0, 0.60),
                           0 2px 4px -2px rgba(0, 0, 0, 0.40);
  --eco-shadow-brand:      0 1px 2px 0 rgba(52, 211, 153, 0.30);

  --eco-tracker-bug:       #f87171;
  --eco-tracker-feature:   #34d399;
  --eco-tracker-task:      #60a5fa;
  --eco-tracker-support:   #c4b5fd;

  --eco-status-new:        #a1a1aa;
  --eco-status-progress:   #60a5fa;
  --eco-status-review:     #fbbf24;
  --eco-status-done:       #34d399;
  --eco-status-stuck:      #f87171;
  --eco-status-hold:       #71717a;
  --eco-prio-low:          #71717a;
  --eco-prio-normal:       #a1a1aa;
  --eco-prio-high:         #fbbf24;
  --eco-prio-urgent:       #f87171;
  --eco-prio-immediate:    #b91c1c;
}

/* ============================================================
   3. Global Base Styles
   ============================================================ */

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--eco-font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--eco-text);
  background: var(--eco-surface-raised);
  transition: background-color var(--eco-transition), color var(--eco-transition);
  /* Tabular numerals — aligns dates/hours/percentages in issue lists */
  font-feature-settings: "tnum", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings — all sans, tight leading, restrained weights */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--eco-font-heading);
  color: var(--eco-text);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.018em; }
h3 { font-size: 15px; font-weight: 600; }
h4 { font-size: 13px; font-weight: 600; }

/* Links — bold, emerald, with clear hover underline.
   Links should be obviously interactive throughout the app. */
a {
  color: var(--eco-primary-active);
  text-decoration: none;
  font-weight: 600;
  background-image: linear-gradient(var(--eco-primary), var(--eco-primary));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: color var(--eco-transition), background-size var(--eco-transition);
}

a:hover {
  color: var(--eco-primary);
  background-size: 100% 1px;
}

a:visited {
  color: var(--eco-primary-active);
}

/* Monospace elements */
code, pre, tt, kbd {
  font-family: var(--eco-font-mono);
  font-size: 0.85em;
}

code {
  background: var(--eco-primary-subtle);
  color: var(--eco-primary);
  padding: 0.15em 0.4em;
  border-radius: var(--eco-radius-sm);
}

pre {
  background: var(--eco-header-bg);
  color: var(--eco-header-text);
  padding: 1rem 1.25rem;
  border-radius: var(--eco-radius-md);
  overflow-x: auto;
  border: 1px solid var(--eco-border);
}

pre code {
  background: none;
  color: inherit;
  padding: 0;
}

/* Selection */
::selection {
  background: rgba(var(--eco-primary-rgb), 0.2);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--eco-surface);
}

::-webkit-scrollbar-thumb {
  background: var(--eco-border-strong);
  border-radius: var(--eco-radius-full);
}

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

/* =============================================================================
   4. Header & Top Menu
   ============================================================================= */

/* =============================================================================
   Header architecture — stacked, not overlapping
   -----------------------------------------------------------------------------
   Redmine 6 markup (simplified):
     body
       └ #top-menu         (global nav: Home, My page, Projects, Admin, Help)
       └ #header           (project brand bar)
            ├ #quick-search   — Redmine floats this right by default
            ├ h1              — project name
            └ #main-menu      — project tabs (Activity, Issues, …)

   Previous attempts positioned #main-menu absolutely, which collided with the
   logo. Instead we make #header flow its children vertically: the logo sits
   at the top (with #quick-search still floated right), #main-menu becomes a
   full-width tab bar flush against the bottom. No overlap is possible.
   ============================================================================= */

body > #top-menu,
#top-menu {
  background: var(--eco-surface) !important;
  color: var(--eco-header-dim);
  font-size: 12px;
  padding: 0 24px;
  height: 36px;
  line-height: 36px;
  border: none;
  border-bottom: 1px solid var(--eco-border);
  margin: 0;
  font-family: var(--eco-font-body);
  font-weight: 500;
}

#top-menu a {
  color: var(--eco-header-dim);
  padding: 0 10px;
  background-image: none;
  font-weight: 500;
  transition: color var(--eco-transition);
}

#top-menu a:hover {
  color: var(--eco-text);
}

#top-menu #loggedas {
  color: var(--eco-text-muted);
  font-size: 11px;
}

#top-menu #loggedas a {
  color: var(--eco-text-secondary);
}

#account {
  font-size: 12px;
}

#account a {
  color: var(--eco-header-dim) !important;
}

#account a:hover {
  color: var(--eco-text) !important;
}

#header {
  background: var(--eco-surface);
  color: var(--eco-text);
  padding: 14px 24px 0;
  min-height: 0;
  border-bottom: 1px solid var(--eco-border);
  box-shadow: var(--eco-shadow-sm);
  border-top: 0;
  position: relative;
  z-index: 100;
}

/* Any text baked directly into #header (breadcrumb, project meta) */
#header,
#header a,
#header .breadcrumb,
#header .breadcrumb a {
  color: var(--eco-text);
}

#header a {
  background-image: none;
}

#header h1 {
  font-family: var(--eco-font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--eco-text);
  padding: 0;
  margin: 0 0 10px 0;
  line-height: 1.3;
  letter-spacing: -0.015em;
  max-width: calc(100% - 280px);
}

#header h1 a {
  color: var(--eco-text);
  background-image: none;
}

#header h1 a:hover {
  color: var(--eco-primary);
  background-image: none;
}

#main-menu {
  background: transparent;
  border: none;
  padding: 0;
  position: static;
  margin: 0 -24px;
  padding: 0 24px;
  border-top: 1px solid var(--eco-border);
}

#main-menu ul {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
}

#main-menu li a {
  color: var(--eco-text-secondary);
  font-family: var(--eco-font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 12px 14px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  background-image: none;
  transition: color var(--eco-transition), border-color var(--eco-transition);
  white-space: nowrap;
}

#main-menu li a:hover {
  color: var(--eco-text);
}

#main-menu li a.selected {
  color: var(--eco-text);
  border-bottom-color: var(--eco-primary);
  font-weight: 600;
}

#quick-search {
  position: absolute;
  top: 12px;
  right: 24px;
  margin: 0;
  line-height: normal;
  float: none;
  z-index: 2;
}

#quick-search label {
  display: none;
}

#quick-search input[type="text"] {
  background: var(--eco-surface-sunken) !important;
  border: 1px solid transparent !important;
  color: var(--eco-text);
  border-radius: var(--eco-radius-md) !important;
  padding: 7px 14px 7px 34px !important;
  font-size: 13px !important;
  font-family: var(--eco-font-body) !important;
  font-weight: 500;
  width: 200px;
  min-height: 32px !important;
  transition: width var(--eco-transition), background var(--eco-transition), border-color var(--eco-transition), box-shadow var(--eco-transition);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 12px center !important;
  background-size: 14px 14px !important;
}

#quick-search input[type="text"]::placeholder {
  color: var(--eco-text-muted);
  font-weight: 500;
}

#quick-search input[type="text"]:focus {
  width: 280px;
  background: var(--eco-surface) !important;
  border-color: var(--eco-primary) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--eco-primary-subtle) !important;
}

/* ==========================================================================
   5. Sidebar
   ========================================================================== */

#main {
  display: flex;
  background: var(--eco-surface-raised);
}

#sidebar {
  flex: 0 0 248px;
  background: var(--eco-surface);
  border-right: 1px solid var(--eco-border);
  padding: 20px 12px 24px;
  font-size: 13px;
  font-family: var(--eco-font-body);
  transition: flex-basis 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
}

#sidebar h3,
#sidebar h4 {
  font-family: var(--eco-font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--eco-text-muted);
  margin: 20px 12px 6px;
  padding: 0;
}

#sidebar h3:first-child,
#sidebar h4:first-child {
  margin-top: 0;
}

#sidebar a {
  color: var(--eco-text-secondary);
  font-size: 13px;
  font-weight: 500;
  background-image: none;
  transition: color var(--eco-transition), background var(--eco-transition);
}

#sidebar a:hover {
  color: var(--eco-text);
}

#sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

#sidebar ul li {
  margin: 0;
}

#sidebar ul li a {
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 32px;
  border-radius: var(--eco-radius-md);
  border-left: none;
  position: relative;
  transition: background var(--eco-transition), color var(--eco-transition);
}

#sidebar ul li a:hover {
  background: var(--eco-surface-sunken);
  color: var(--eco-text);
}

#sidebar ul li a.selected,
#sidebar ul li.selected > a {
  color: var(--eco-primary);
  background: var(--eco-primary-subtle);
  font-weight: 600;
}

#sidebar ul li a.selected::before,
#sidebar ul li.selected > a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--eco-primary);
  border-radius: 0 2px 2px 0;
}

#sidebar-switch-button {
  color: var(--eco-text-muted);
  transition: color 0.2s ease;
}

#sidebar-switch-button:hover {
  color: var(--eco-primary);
}

/* =============================================================================
   6. Content Area
   ============================================================================= */

#content {
  flex: 1 1 auto;
  padding: 28px 32px 40px;
  max-width: 1360px;
  min-height: 70vh;
  background: transparent;
}

/* Page title row: h2 + contextual actions */
#content > h2:first-of-type,
#content > .contextual + h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-family: var(--eco-font-heading);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--eco-text);
}

p.breadcrumb {
  font-size: 0.8rem;
  color: var(--eco-text-muted);
  margin-bottom: 1rem;
}

p.breadcrumb a {
  color: var(--eco-text-secondary);
  background-image: none;
}

p.breadcrumb a:hover {
  color: var(--eco-primary);
}

.box,
fieldset,
div.wiki {
  background: var(--eco-surface);
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-lg);
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: var(--eco-shadow-sm);
}

fieldset legend {
  font-family: var(--eco-font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--eco-text-secondary);
  padding: 0 0.5rem;
}

div.contextual {
  font-size: 0.85rem;
  float: right;
  margin-top: 0.35rem;
}

div.contextual a {
  color: var(--eco-text-secondary);
  background-image: none;
  padding: 6px 12px;
  border-radius: var(--eco-radius-md);
  transition: background 0.15s ease, color 0.15s ease;
}

div.contextual a:hover {
  color: var(--eco-primary);
  background: var(--eco-primary-subtle);
}

div.tabs ul {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--eco-border);
  margin-bottom: 1.25rem;
  padding: 0;
}

div.tabs ul li a {
  font-family: var(--eco-font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--eco-text-secondary);
  padding: 0.6rem 1rem;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  background: none;
  background-image: none;
  transition: all 0.2s ease;
}

div.tabs ul li a:hover {
  color: var(--eco-text);
  border-bottom-color: var(--eco-border-strong);
}

div.tabs ul li a.selected {
  color: var(--eco-primary);
  border-bottom-color: var(--eco-primary);
  font-weight: 600;
}

#footer {
  background: var(--eco-surface);
  border-top: 1px solid var(--eco-border);
  color: var(--eco-text-muted);
  font-size: 0.75rem;
  padding: 1rem 1.5rem;
  text-align: center;
}

#footer a {
  color: var(--eco-text-muted);
  background-image: none;
}

#footer a:hover {
  color: var(--eco-primary);
}

/* ============================================================
   7. Buttons
   ============================================================ */

/* --- Base — calm Linear/Notion-style buttons --- */
input[type="submit"],
input[type="button"],
input[type="reset"],
button,
a.button,
.button {
  font-family: var(--eco-font-body) !important;
  font-size: 13px !important;
  font-weight: 500;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--eco-radius-md);
  cursor: pointer;
  transition: background-color var(--eco-transition),
              border-color var(--eco-transition),
              color var(--eco-transition),
              box-shadow var(--eco-transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1.4;
  background-image: none;
  min-height: 34px;
  white-space: nowrap;
  user-select: none;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
}

button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
a.button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Primary — solid flat emerald --- */
input[type="submit"],
button.button-positive,
a.button.button-positive {
  background-color: var(--eco-primary);
  color: #fff !important;
  border-color: var(--eco-primary);
  box-shadow: var(--eco-shadow-brand);
  font-weight: 600;
}

input[type="submit"]:hover,
button.button-positive:hover,
a.button.button-positive:hover {
  background-color: var(--eco-primary-hover);
  border-color: var(--eco-primary-hover);
  color: #fff !important;
}

input[type="submit"]:active,
button.button-positive:active,
a.button.button-positive:active {
  background-color: var(--eco-primary-active);
  border-color: var(--eco-primary-active);
}

/* --- Secondary — white with hairline border --- */
input[type="button"],
input[type="reset"],
button:not([class*="button-"]):not([class*="jstb_"]):not(.tab-elements button):not(.jstEditor button),
a.button:not([class*="button-"]) {
  background-color: var(--eco-surface);
  color: var(--eco-text);
  border-color: var(--eco-border-strong);
  box-shadow: var(--eco-shadow-sm);
  font-weight: 500;
}

input[type="button"]:hover,
input[type="reset"]:hover,
button:not([class*="button-"]):not([class*="jstb_"]):not(.tab-elements button):not(.jstEditor button):hover,
a.button:not([class*="button-"]):hover {
  background-color: var(--eco-surface-sunken);
  border-color: var(--eco-border-strong);
  color: var(--eco-text);
}

input[type="button"]:active,
button:not([class*="button-"]):not([class*="jstb_"]):not(.tab-elements button):not(.jstEditor button):active,
a.button:not([class*="button-"]):active {
  background-color: var(--eco-surface-sunken);
  border-color: var(--eco-border-strong);
}

/* --- Danger — solid flat red --- */
button.button-negative,
a.button.button-negative {
  background: var(--eco-danger);
  color: #fff !important;
  border-color: var(--eco-danger);
  box-shadow: 0 1px 2px 0 rgba(220, 38, 38, 0.20);
  font-weight: 600;
}

button.button-negative:hover,
a.button.button-negative:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

/* --- Focus ring --- */
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible,
button:focus-visible,
a.button:focus-visible,
.button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--eco-primary-rgb), 0.25);
}

/* --- Small button modifier --- */
.button-small,
a.button.button-small {
  padding: 4px 10px !important;
  font-size: 12px !important;
  min-height: 28px !important;
  border-radius: var(--eco-radius-sm);
}

/* ==========================================================================
   8. Forms & Inputs
   ========================================================================== */

/* --- Labels --- */
label {
  font-family: var(--eco-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--eco-text);
  margin-bottom: 6px;
  letter-spacing: 0.005em;
}

/* --- Text-like inputs, textarea, select ---
   Explicit font-size in pixels to insulate from Redmine's base CSS. */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="tel"],
input[type="search"],
textarea,
select {
  font-family: var(--eco-font-body) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--eco-text);
  background-color: var(--eco-surface);
  border: 1px solid var(--eco-border-strong);
  border-radius: var(--eco-radius-md);
  padding: 7px 12px;
  transition: border-color var(--eco-transition), box-shadow var(--eco-transition);
  width: auto;
  box-sizing: border-box;
  min-height: 34px;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
}

input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="url"]:hover,
input[type="number"]:hover,
input[type="date"]:hover,
input[type="search"]:hover,
textarea:hover,
select:hover {
  border-color: var(--eco-border-strong);
}

/* Custom select: consistent chrome + custom chevron */
select {
  min-width: 180px;
  padding: 7px 32px 7px 12px !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
  background-color: var(--eco-surface);
  cursor: pointer;
  font-weight: 500;
}

/* Native option popup uses OS-rendered font — webkit-on-Mac can't apply
   custom webfonts to option elements, so fall back to system font */
select option {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: var(--eco-text);
  background: var(--eco-surface);
  padding: 8px 12px;
}

/* Placeholder polish */
input::placeholder,
textarea::placeholder {
  color: var(--eco-text-muted);
  opacity: 1;
}

/* --- Focus state — emerald ring --- */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--eco-primary);
  box-shadow: 0 0 0 3px rgba(var(--eco-primary-rgb), 0.15);
  outline: none;
}

/* --- Textarea --- */
textarea {
  min-height: 120px;
  line-height: 1.5;
  resize: vertical;
}

/* --- Checkbox & Radio --- */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--eco-primary);
  margin-right: 6px;
}

/* --- Attribute grid --- */
div.attributes {
  display: grid;
  gap: 0.75rem;
}

div.attributes p {
  margin: 0;
}

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

/* ============================================================
   9. Tables & Issue Lists
   ============================================================ */

/* ----- Base table ----- */
table.list {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 13px;
  background: var(--eco-surface);
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-lg);
  overflow: hidden;
  box-shadow: var(--eco-shadow-sm);
}

/* ----- Header cells ----- */
table.list thead th {
  background: var(--eco-surface-raised);
  color: var(--eco-text-muted);
  font-family: var(--eco-font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 12px;
  border-bottom: 1px solid var(--eco-border);
  border-right: none;
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 10;
  white-space: nowrap;
}

/* ----- Sort links inside header ----- */
table.list thead th a {
  color: var(--eco-text-secondary);
  background-image: none;
}

table.list thead th a:hover {
  color: var(--eco-primary);
}

/* ----- Body cells ----- */
table.list tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--eco-border);
  border-right: none;
  color: var(--eco-text);
  vertical-align: middle;
  transition: background-color 0.15s ease;
  font-size: 13px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* ----- Body rows ----- */
table.list tbody tr {
  transition: background-color 0.15s ease;
  border-left: 3px solid transparent;
}

table.list tbody tr:hover {
  background: var(--eco-surface-sunken);
}

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

/* ----- Remove alternating row colours ----- */
table.list tr.odd,
table.list tr.even {
  background: transparent;
}

table.list tr.odd:hover,
table.list tr.even:hover {
  background: var(--eco-surface-sunken);
}

/* ----- Issue IDs — quiet mono text, no pill ----- */
table.list td.id,
table.list td.id a,
a.issue {
  font-family: var(--eco-font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--eco-text-secondary);
  background: transparent;
  padding: 0;
  border: none;
  border-radius: 0;
  background-image: none;
  display: inline-block;
  letter-spacing: -0.01em;
  transition: color var(--eco-transition);
}

table.list td.id a:hover,
a.issue:hover {
  color: var(--eco-primary);
  background: transparent;
  transform: none;
  border: none;
}

/* ----- Tracker colour coding ----- */
table.list tr.tracker-1 { border-left-color: var(--eco-tracker-bug); }
table.list tr.tracker-2 { border-left-color: var(--eco-tracker-feature); }
table.list tr.tracker-3 { border-left-color: var(--eco-tracker-task); }
table.list tr.tracker-4 { border-left-color: var(--eco-tracker-support); }

/* ----- Closed issues ----- */
table.list tr.closed td,
table.list tr.closed td a {
  color: var(--eco-text-muted);
}

table.list tr.closed td.subject a {
  text-decoration: line-through;
}

/* ----- Pagination ----- */
ul.pages {
  display: flex;
  gap: 4px;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
}

ul.pages li a {
  display: inline-block;
  padding: 6px 12px;
  font-size: 0.85rem;
  border-radius: var(--eco-radius-md);
  color: var(--eco-text-secondary);
  background-image: none;
}

ul.pages li a:hover {
  background: var(--eco-primary-subtle);
  color: var(--eco-primary);
}

ul.pages span.current {
  background: var(--eco-primary);
  color: #fff;
  font-weight: 600;
  display: inline-block;
  padding: 6px 12px;
  font-size: 0.85rem;
  border-radius: var(--eco-radius-md);
}

/* ----- Compact mode ----- */
body.eco-compact table.list tbody td {
  padding: 6px 10px;
  font-size: 0.8rem;
}

body.eco-compact table.list thead th {
  padding: 6px 10px;
  font-size: 0.7rem;
}

/* ============================================================
   10. Issue Detail & Journals
   ============================================================ */

/* Issue card — clean, hairline-bordered, no decorative accents */
div.issue {
  background: var(--eco-surface) !important;
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-lg);
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: var(--eco-shadow-sm);
  color: var(--eco-text);
  position: relative;
}

/* Avatar stack — small, flat, square, unobtrusive */
div.issue .avatar-with-child {
  float: left;
  margin: 2px 14px 4px 0;
  position: relative;
  width: 36px;
  height: 36px;
}

div.issue .avatar-with-child .avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--eco-radius-md);
  background: var(--eco-primary);
  color: #fff !important;
  font-family: var(--eco-font-body);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  border: none;
  text-decoration: none;
}

div.issue .avatar-with-child .avatar-child {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 18px !important;
  height: 18px !important;
  font-size: 8px !important;
  border-radius: 50%;
  border: 2px solid var(--eco-surface);
  background: var(--eco-text-secondary);
}

/* Subject wrapper Redmine 6 adds for sticky header */
div.issue .subject {
  margin: 0 0 20px;
  padding: 0;
}

/* Issue title — large sans, tight leading */
div.issue .subject h3,
div.issue > div > h3,
div.issue h3,
h2.issue-subject {
  font-family: var(--eco-font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--eco-text);
  margin: 0 0 4px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* "Added by X Y minutes ago" meta line under the title */
div.issue .subject > p,
div.issue p.author {
  font-family: var(--eco-font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--eco-text-muted);
  margin: 0;
}

div.issue .subject > p a,
div.issue p.author a {
  color: var(--eco-text-secondary);
  font-weight: 500;
  background-image: none;
}

/* Redmine wraps the issue number in the h3; style it as a muted prefix */
div.issue h3 a,
div.issue h3 .issue-id {
  color: var(--eco-text-muted) !important;
  font-weight: 500;
  background-image: none;
}

/* ──────────────────────────────────────────
   Issue page heading: "Bug #1" + status badge
   ────────────────────────────────────────── */

#content > h2.inline-block {
  display: inline-flex;
  align-items: baseline;
  margin: 0 10px 20px 0;
  font-family: var(--eco-font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--eco-text);
  letter-spacing: -0.018em;
  line-height: 1.25;
}

/* Redmine 6 emits .badge.badge-status-open / closed / locked next
   to the "Bug #N" heading — style as a small flat pill */
#content > h2.inline-block + .badge,
.badge.badge-status-open,
.badge.badge-status-closed,
.badge.badge-status-locked {
  display: inline-flex;
  align-items: center;
  font-family: var(--eco-font-body);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--eco-radius-full);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  vertical-align: middle;
  margin-left: 2px;
  line-height: 1.4;
  border: 1px solid transparent;
}

.badge.badge-status-open {
  background: var(--eco-primary-subtle);
  color: var(--eco-primary-active);
  border-color: var(--eco-primary-soft);
}

.badge.badge-status-closed {
  background: var(--eco-surface-sunken);
  color: var(--eco-text-secondary);
  border-color: var(--eco-border);
}

.badge.badge-status-locked {
  background: var(--eco-warning-subtle);
  color: #b45309;
  border-color: #fde68a;
}

/* Issue attributes grid — nested panel inside the card.
   Redmine 6 wraps children in .splitcontent > .splitcontentleft × 2,
   so we use `display: contents` to flatten the wrappers and let
   the individual .attribute divs become direct grid items. */
div.issue div.attributes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  background: transparent;
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-md);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
}

/* Flatten Redmine's split wrappers so attributes flow into the grid */
div.issue div.attributes > div.splitcontent,
div.issue div.attributes div.splitcontentleft,
div.issue div.attributes div.splitcontentright {
  display: contents;
}

div.issue div.attributes .attribute {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  min-height: auto;
  grid-template-columns: none;
  width: auto;
  float: none !important;
  padding: 0;
  margin: 0;
}

div.issue .attribute .label {
  font-family: var(--eco-font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--eco-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  display: block;
}

div.issue .attribute .value {
  font-family: var(--eco-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--eco-text);
  min-width: 0;
  word-wrap: break-word;
  line-height: 1.4;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block;
}

div.issue .attribute .value a {
  color: var(--eco-primary);
  background-image: none;
}

/* Overdue due-date gets the red treatment, like the mockup */
div.issue .attribute.due-date .value,
div.issue .due-date.overdue .value {
  color: var(--eco-danger);
}

/* Status / issue pills — calm flat chip */
span.project-status,
span.issue-status {
  display: inline-flex;
  align-items: center;
  font-family: var(--eco-font-body);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--eco-radius-full);
  background: var(--eco-primary-subtle);
  color: var(--eco-primary-active);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.4;
  border: 1px solid var(--eco-primary-soft);
}

/* History section */
div#history {
  margin-top: 24px;
}

div#history h3 {
  font-family: var(--eco-font-heading);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--eco-border);
}

/* Journal entries */
div.journal {
  position: relative;
  padding: 1rem 1.25rem;
  margin: 0 0 1rem 20px;
  background: var(--eco-surface);
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-lg);
  transition: box-shadow 0.15s ease;
}

div.journal:hover {
  box-shadow: var(--eco-shadow-sm);
}

/* Timeline line */
div.journal::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 0;
  bottom: -1rem;
  width: 2px;
  background: var(--eco-border);
}

div.journal:last-child::before {
  bottom: 50%;
}

/* Timeline dot */
div.journal::after {
  content: '';
  position: absolute;
  left: -16px;
  top: 1.25rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--eco-primary);
  border: 2px solid var(--eco-surface);
}

/* Journal header */
div.journal h4 {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--eco-text-secondary);
  margin: 0 0 0.5rem;
}

div.journal h4 a {
  font-weight: 600;
  color: var(--eco-text);
  background-image: none;
}

/* Change details list */
ul.details {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
  font-size: 0.8rem;
}

ul.details li {
  color: var(--eco-text-secondary);
  padding: 2px 0;
}

ul.details li strong {
  color: var(--eco-text);
  font-weight: 600;
}

ul.details li del {
  color: var(--eco-danger);
  text-decoration: line-through;
  opacity: 0.7;
}

ul.details li i {
  color: var(--eco-success);
  font-style: normal;
}

/* Journal wiki/note body */
div.journal div.wiki {
  border: none;
  box-shadow: none;
  padding: 0.5rem 0 0;
  margin: 0;
  background: transparent;
}

/* ============================================================
   11. Flash Messages & Alerts
   ============================================================ */

/* Base flash */
div.flash {
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: var(--eco-radius-md);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.5;
}

/* Notice (success) */
div.flash.notice {
  background: var(--eco-success-subtle);
  border-color: var(--eco-success);
  border-left-color: var(--eco-success);
  color: var(--eco-success);
}

/* Warning */
div.flash.warning {
  background: var(--eco-warning-subtle);
  border-color: var(--eco-warning);
  border-left-color: var(--eco-warning);
  color: var(--eco-warning);
}

/* Error */
div.flash.error {
  background: var(--eco-danger-subtle);
  border-color: var(--eco-danger);
  border-left-color: var(--eco-danger);
  color: var(--eco-danger);
}

/* Links inside flash */
div.flash a {
  font-weight: 600;
  background-image: none;
}

/* Validation error explanation */
div#errorExplanation {
  background: var(--eco-danger-subtle);
  border: 1px solid var(--eco-danger);
  border-left-width: 4px;
  border-radius: var(--eco-radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

div#errorExplanation h2 {
  font-size: 0.95rem;
  color: var(--eco-danger);
  margin: 0 0 0.5rem;
}

div#errorExplanation ul {
  margin: 0;
  padding-left: 1.25rem;
}

div#errorExplanation li {
  color: var(--eco-danger);
  font-size: 0.85rem;
}

/* Tooltip */
div.tooltip {
  background: var(--eco-header-bg);
  color: var(--eco-header-text);
  border: none;
  border-radius: var(--eco-radius-md);
  padding: 8px 14px;
  font-size: 0.8rem;
  box-shadow: var(--eco-shadow-lg);
  max-width: 400px;
}

/* Context menu */
div#context-menu {
  background: var(--eco-surface);
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-md);
  box-shadow: var(--eco-shadow-lg);
  padding: 4px 0;
  min-width: 180px;
}

div#context-menu a {
  display: block;
  padding: 6px 14px;
  color: var(--eco-text);
  font-size: 0.85rem;
  background-image: none;
  transition: background 0.15s ease;
}

div#context-menu a:hover {
  background: var(--eco-primary-subtle);
  color: var(--eco-primary);
}

div#context-menu li.folder > a {
  font-weight: 600;
}

div#context-menu hr {
  border: none;
  border-top: 1px solid var(--eco-border);
  margin: 4px 0;
}

/* ============================================================
   12. Repository, Diff & Wiki
   ============================================================ */

table.filecontent {
  font-family: var(--eco-font-mono);
  font-size: 0.8rem;
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-md);
  overflow: hidden;
}

table.filecontent th.line-num {
  background: var(--eco-surface-raised);
  color: var(--eco-text-muted);
  font-size: 0.75rem;
  padding: 2px 10px;
  border-right: 1px solid var(--eco-border);
  text-align: right;
  user-select: none;
  width: 1%;
  min-width: 50px;
}

/* Diff additions */
td.line-code.diff_in,
tr.diff .line-code.diff_in {
  background: var(--eco-success-subtle);
}

td.line-num.diff_in {
  background: var(--eco-success-subtle);
  border-right-color: var(--eco-success);
}

/* Diff deletions */
td.line-code.diff_out,
tr.diff .line-code.diff_out {
  background: var(--eco-danger-subtle);
}

td.line-num.diff_out {
  background: var(--eco-danger-subtle);
  border-right-color: var(--eco-danger);
}

table.list.files tbody td.filename {
  font-family: var(--eco-font-body);
}

table.list.files tbody td.filename a {
  background-image: none;
}

div.revision-info {
  background: var(--eco-surface-raised);
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-lg);
  padding: 1rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
}

div.wiki {
  color: var(--eco-text);
  line-height: 1.7;
}

div.wiki h1 {
  font-size: 1.6rem;
  border-bottom: 2px solid var(--eco-border);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

div.wiki h2 {
  font-size: 1.3rem;
  border-bottom: 1px solid var(--eco-border);
  padding-bottom: 0.4rem;
  margin-bottom: 0.75rem;
}

div.wiki h3 {
  font-size: 1.1rem;
}

div.wiki table {
  border: 1px solid var(--eco-border);
  border-collapse: collapse;
  border-radius: var(--eco-radius-md);
  margin-bottom: 1rem;
}

div.wiki table th {
  background: var(--eco-surface-raised);
  font-weight: 600;
  padding: 8px 12px;
  border: 1px solid var(--eco-border);
  font-size: 0.85rem;
}

div.wiki table td {
  padding: 8px 12px;
  border: 1px solid var(--eco-border);
  font-size: 0.85rem;
}

div.wiki blockquote {
  border-left: 4px solid var(--eco-primary);
  background: var(--eco-primary-subtle);
  padding: 0.75rem 1.25rem;
  margin: 1rem 0;
  border-radius: 0 var(--eco-radius-md) var(--eco-radius-md) 0;
  color: var(--eco-text-secondary);
}

div.wiki img {
  max-width: 100%;
  border-radius: var(--eco-radius-md);
}

ul.toc {
  background: var(--eco-surface-raised);
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-lg);
  padding: 1rem 1.25rem 1rem 2.5rem;
  max-width: 45%;
  font-size: 0.85rem;
}

/* ============================================================
   13. Progress Bars, Gantt & Calendar
   ============================================================ */

/* Progress bar table — thin, flat emerald */
table.progress {
  border-collapse: collapse;
  border-radius: var(--eco-radius-full);
  overflow: hidden;
  height: 6px;
  background: var(--eco-surface-sunken);
}

table.progress td {
  height: 6px;
  padding: 0;
  border: none;
}

table.progress td.closed {
  background: var(--eco-success);
}

table.progress td.done {
  background: var(--eco-primary);
}

table.progress td.todo {
  background: transparent;
}

/* Percent label */
p.percent {
  font-size: 13px;
  font-family: var(--eco-font-body);
  font-weight: 500;
  color: var(--eco-text-secondary);
}

/* Gantt header */
.gantt_hdr {
  font-size: 0.75rem;
  font-family: var(--eco-font-body);
  font-weight: 500;
  color: var(--eco-text-secondary);
  background: var(--eco-surface-raised);
  border-color: var(--eco-border);
}

/* Gantt task bars */
.task_late {
  background: var(--eco-danger);
  border-radius: var(--eco-radius-sm);
}

.task_done {
  background: var(--eco-success);
  border-radius: var(--eco-radius-sm);
}

.task_todo {
  background: var(--eco-primary);
  border-radius: var(--eco-radius-sm);
}

.milestone {
  background: var(--eco-warning);
}

/* Calendar table */
table.cal {
  border-collapse: collapse;
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-lg);
  overflow: hidden;
}

table.cal thead th {
  background: var(--eco-surface-raised);
  color: var(--eco-text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 10px;
  border: 1px solid var(--eco-border);
  text-align: center;
}

table.cal td {
  border: 1px solid var(--eco-border);
  vertical-align: top;
  padding: 4px 6px;
  font-size: 0.8rem;
  height: 80px;
}

table.cal td.today {
  background: var(--eco-primary-subtle);
}

table.cal td p.day-num {
  font-family: var(--eco-font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--eco-text);
  text-align: right;
}

table.cal td.odd p.day-num {
  color: var(--eco-text-muted);
}

/* ============================================================
   14. My Page Dashboard & Activity
   ============================================================ */

/* My Page box */
div.mypage-box {
  background: var(--eco-surface);
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-lg);
  padding: 1.5rem 1.6rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--eco-shadow-md);
}

div.mypage-box h3 {
  font-family: var(--eco-font-body);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--eco-text-muted);
  margin: 0 0 1rem;
  padding-bottom: 0;
  border-bottom: none;
}

/* Dashboard counts */
#sidebar .count,
.issue-count {
  font-family: var(--eco-font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--eco-primary);
  display: block;
  line-height: 1.2;
}

/* ═══════════════════════════════════════════════
   Activity feed — clean timeline, PM-scannable
   ═══════════════════════════════════════════════ */

/* Subtitle "From 03/30/2026 to 04/08/2026" */
#content > p.subtitle {
  font-size: 12px;
  font-weight: 500;
  color: var(--eco-text-muted);
  margin: -12px 0 24px;
  letter-spacing: 0;
}

#activity {
  background: var(--eco-surface);
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-lg);
  padding: 0;
  box-shadow: var(--eco-shadow-sm);
  overflow: hidden;
  position: relative;
}

/* Date group heading: "Today", "Yesterday", "03/30/2026" */
#activity h3 {
  font-family: var(--eco-font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--eco-text-muted);
  margin: 0;
  padding: 14px 20px 8px;
  border-bottom: 1px solid var(--eco-border);
  background: var(--eco-surface-raised);
}

#activity h3:first-child {
  border-top: none;
}

#activity dl {
  margin: 0;
  padding: 0;
}

/* Entry header row (icon + avatar + title + time) */
#activity dt,
dl.activity dt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--eco-text);
  border-bottom: none;
  margin: 0;
  position: relative;
  transition: background-color var(--eco-transition);
}

#activity dt:hover,
dl.activity dt:hover {
  background: var(--eco-surface-sunken);
}

/* Redmine 6 renders an SVG icon inside the dt (issue / news / document
   / wiki / message / attachment / changeset) — style it as a small
   circular badge colored by the event type */
#activity dt .icon-svg {
  width: 28px !important;
  height: 28px !important;
  padding: 6px;
  border-radius: 50%;
  background: var(--eco-surface-sunken);
  color: var(--eco-text-secondary);
  flex-shrink: 0;
  box-sizing: border-box;
}

#activity dt.issue .icon-svg {
  background: var(--eco-primary-subtle);
  color: var(--eco-primary);
}

#activity dt.changeset .icon-svg,
#activity dt.commit .icon-svg {
  background: var(--eco-info-subtle);
  color: var(--eco-info);
}

#activity dt.news .icon-svg,
#activity dt.message .icon-svg {
  background: var(--eco-warning-subtle);
  color: var(--eco-warning);
}

#activity dt.document .icon-svg,
#activity dt.attachment .icon-svg,
#activity dt.wiki-page .icon-svg {
  background: var(--eco-surface-sunken);
  color: var(--eco-text-secondary);
}

/* User avatar next to the icon — small circle */
#activity dt .avatar {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px;
  border-radius: 50%;
  background: var(--eco-primary);
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--eco-font-body);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
  border: none;
}

/* Entry title link (e.g. "Bug #1 (New): sdsfasd") */
#activity dt a {
  color: var(--eco-text);
  font-weight: 500;
  font-size: 13px;
  background-image: none;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#activity dt a:hover {
  color: var(--eco-primary);
}

/* Timestamp — pushed to the right, tabular numerals */
#activity dt .time,
#activity span.time,
dl.activity span.time {
  color: var(--eco-text-muted);
  font-size: 12px;
  font-weight: 500;
  float: none;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-family: var(--eco-font-mono);
  letter-spacing: -0.02em;
  margin-left: auto;
  order: 2;
}

/* Place timestamp after the title link */
#activity dt a {
  order: 1;
}

#activity dt .icon-svg,
#activity dt .avatar {
  order: 0;
}

/* Entry body (description + author) */
#activity dd,
dl.activity dd {
  padding: 0 20px 14px 76px;
  border: none;
  border-left: none;
  margin: 0;
  font-size: 12px;
  color: var(--eco-text-secondary);
  line-height: 1.5;
}

#activity dd:hover,
dl.activity dd:hover {
  border-left-color: transparent;
}

#activity dd .description,
dl.activity dd .description {
  display: block;
  color: var(--eco-text-secondary);
  margin-bottom: 4px;
}

/* Author name */
#activity span.author,
dl.activity span.author {
  color: var(--eco-text-muted);
  font-size: 11px;
  font-weight: 500;
}

#activity span.author a,
dl.activity span.author a {
  color: var(--eco-text-muted);
  background-image: none;
}

#activity span.author a:hover {
  color: var(--eco-primary);
}

/* Separator between entries */
#activity dd + dt {
  border-top: 1px solid var(--eco-border);
  margin-top: 0;
  padding-top: 14px;
}

/* Pagination row below activity feed */
#content > .pagination,
#content > span.pagination {
  display: inline-flex;
  margin: 20px 0 0;
}

/* Date warnings */
.overdue {
  color: var(--eco-danger) !important;
  font-weight: 600;
}

.due-soon {
  color: var(--eco-warning) !important;
}

/* ============================================================
   15. Responsive & Mobile
   ============================================================ */

/* --- Tablet breakpoint (900px) --- */
@media screen and (max-width: 900px) {

  /* Layout: stack sidebar above content */
  #main {
    flex-direction: column;
  }

  #sidebar {
    flex: none;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--eco-border);
    padding: 1rem;
    max-height: none;
  }

  #content {
    padding: 1rem;
    max-width: 100%;
  }

  /* Header: shrink and allow wrapping */
  #header {
    min-height: auto;
    padding: 0.75rem 1rem 0;
  }

  #header h1 {
    font-size: 1rem;
    line-height: 1.3;
    margin: 0 0 0.5rem;
    max-width: calc(100% - 56px); /* reserve space for dark-mode toggle */
  }

  /* Main menu: scrollable horizontal strip below the logo */
  #main-menu {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -1rem;
    padding: 0 1rem;
  }

  #main-menu::-webkit-scrollbar {
    display: none;
  }

  #main-menu ul {
    flex-wrap: nowrap;
  }

  #main-menu li a {
    padding: 0.6rem 0.75rem;
    font-size: 0.8rem;
  }

  /* Search: narrower */
  #quick-search {
    line-height: 48px;
  }

  #quick-search input[type="text"] {
    width: 120px;
  }

  #quick-search input[type="text"]:focus {
    width: 180px;
  }

  /* Issue detail: single column attributes */
  div.issue div.attributes {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  /* Tables: horizontal scroll wrapper */
  table.list {
    font-size: 0.8rem;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table.list thead,
  table.list tbody,
  table.list tr {
    display: table;
    width: 100%;
    table-layout: auto;
  }

  table.list thead th,
  table.list tbody td {
    padding: 8px;
  }

  /* Tabs: horizontal scroll */
  div.tabs ul {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }

  div.tabs ul::-webkit-scrollbar {
    display: none;
  }

  /* TOC: full width */
  ul.toc {
    max-width: 100%;
  }

  /* Calendar: smaller cells */
  table.cal td {
    height: 60px;
    padding: 2px 4px;
    font-size: 0.75rem;
  }

  /* Wiki images */
  div.wiki img {
    max-width: 100%;
    height: auto;
  }

  /* Forms: full width inputs */
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  input[type="search"],
  textarea,
  select {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Journal timeline: reduce left offset */
  div.journal {
    margin-left: 14px;
  }

  div.journal::before {
    left: -9px;
  }

  div.journal::after {
    left: -12px;
    width: 8px;
    height: 8px;
  }

  /* Fieldsets / cards: tighter padding */
  .box,
  fieldset {
    padding: 1rem;
  }
}

/* --- Mobile breakpoint (600px) --- */
@media screen and (max-width: 600px) {

  /* Tighter padding everywhere */
  #top-menu {
    padding: 0 0.75rem;
    font-size: 0.75rem;
  }

  #header {
    padding: 0 0.75rem;
  }

  #content {
    padding: 0.75rem;
  }

  /* Hide quick search on very small screens — use flyout instead */
  #quick-search {
    display: none;
  }

  /* Header title: compact */
  #header h1 {
    font-size: 0.9rem;
    line-height: 44px;
  }

  /* Main menu: smaller touch targets but still 44px min */
  #main-menu li a {
    padding: 0.5rem 0.6rem;
    font-size: 0.75rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Sidebar: collapsible style */
  #sidebar {
    padding: 0.75rem;
    font-size: 0.8rem;
  }

  #sidebar h3,
  #sidebar h4 {
    font-size: 0.65rem;
  }

  /* Tables: much tighter */
  table.list thead th,
  table.list tbody td {
    padding: 6px 4px;
    font-size: 0.75rem;
  }

  /* Hide less important table columns on mobile */
  table.list td.updated_on,
  table.list th.updated_on,
  table.list td.created_on,
  table.list th.created_on,
  table.list td.category,
  table.list th.category {
    display: none;
  }

  /* Issue ID pills: smaller */
  table.list td.id a,
  a.issue {
    font-size: 0.7rem;
    padding: 1px 6px;
  }

  /* Tabs: scrollable, no wrap */
  div.tabs ul li a {
    padding: 0.5rem 0.6rem;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  /* Issue detail: full-width, stacked */
  div.issue div.attributes {
    grid-template-columns: 1fr;
    padding: 0.75rem;
  }

  div.issue div.attributes .attribute {
    flex-direction: column;
    gap: 2px;
  }

  /* Issue title smaller */
  div.issue h3,
  h2.issue-subject {
    font-size: 1.15rem;
  }

  /* Journals: no timeline on mobile, card stack */
  div.journal {
    margin-left: 0;
    padding: 0.75rem;
  }

  div.journal::before,
  div.journal::after {
    display: none;
  }

  /* Headings: scaled down */
  h1 { font-size: 1.35rem; }
  h2 { font-size: 1.15rem; }
  h3 { font-size: 1rem; }

  /* Flash messages: tighter */
  div.flash {
    padding: 0.6rem 0.75rem;
    font-size: 0.8rem;
  }

  /* Calendar: even smaller */
  table.cal td {
    height: 50px;
    padding: 2px;
    font-size: 0.7rem;
  }

  table.cal thead th {
    padding: 6px;
    font-size: 0.7rem;
  }

  /* Gantt: horizontal scroll */
  .gantt_area {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Fieldsets / cards */
  .box,
  fieldset {
    padding: 0.75rem;
    border-radius: var(--eco-radius-md);
  }

  /* Buttons: full width on mobile for primary actions */
  .action-bar input[type="submit"],
  #issue-form input[type="submit"] {
    width: 100%;
    justify-content: center;
  }

  /* Attachments: compact */
  div.attachments p {
    font-size: 0.8rem;
  }

  /* Footer: compact */
  #footer {
    padding: 0.75rem;
    font-size: 0.7rem;
  }

  /* Context menu: full-width bottom sheet style */
  div#context-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    border-radius: var(--eco-radius-lg) var(--eco-radius-lg) 0 0;
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  div#context-menu a {
    padding: 12px 16px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Autocomplete: full width */
  div.autocomplete {
    left: 0.75rem !important;
    right: 0.75rem !important;
    width: auto !important;
  }

  /* My page boxes: tighter */
  div.mypage-box {
    padding: 0.75rem;
  }

  div.mypage-box h3 {
    font-size: 0.9rem;
  }

  /* Progress bars: slightly taller for touch */
  table.progress {
    height: 12px;
  }
}

/* --- Small phone breakpoint (380px) --- */
@media screen and (max-width: 380px) {

  #top-menu {
    height: 28px;
    line-height: 28px;
    font-size: 0.7rem;
  }

  #top-menu a {
    padding: 0 0.3rem;
  }

  #header h1 {
    font-size: 0.85rem;
    line-height: 1.3;
    margin: 0 0 0.4rem;
  }

  #main-menu li a {
    padding: 0.4rem 0.5rem;
    font-size: 0.7rem;
  }

  #content {
    padding: 0.5rem;
  }

  #sidebar {
    padding: 0.5rem;
  }

  table.list thead th,
  table.list tbody td {
    padding: 4px 3px;
    font-size: 0.7rem;
  }

  /* Hide even more columns */
  table.list td.assigned_to,
  table.list th.assigned_to,
  table.list td.priority,
  table.list th.priority {
    display: none;
  }

  div.issue div.attributes {
    padding: 0.5rem;
    font-size: 0.8rem;
  }

  h1 { font-size: 1.15rem; }
  h2 { font-size: 1rem; }

  div.flash {
    padding: 0.5rem;
    font-size: 0.75rem;
  }
}

/* --- Touch-friendly tap targets (all mobile) --- */
@media screen and (max-width: 900px) {
  /* Ensure minimum 44px tap targets per WCAG */
  #sidebar ul li a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  ul.pages li a,
  ul.pages li span.current {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  input[type="submit"],
  input[type="button"],
  button,
  a.button {
    min-height: 44px;
    padding: 10px 18px;
  }

  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  input[type="search"],
  textarea,
  select {
    min-height: 44px;
    font-size: 16px; /* prevents iOS zoom on focus */
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 20px;
    height: 20px;
  }

  /* Prevent iOS double-tap zoom */
  * {
    touch-action: manipulation;
  }
}

/* --- Landscape phone optimization --- */
@media screen and (max-width: 900px) and (orientation: landscape) {
  #header {
    min-height: auto;
  }

  #header h1 {
    line-height: 40px;
  }

  #top-menu {
    height: 28px;
    line-height: 28px;
  }

  #sidebar {
    max-height: 200px;
    overflow-y: auto;
  }

  table.cal td {
    height: 50px;
  }
}

/* --- Compact density (body.eco-compact) --- */
body.eco-compact {
  font-size: 0.85rem;
}

body.eco-compact #sidebar {
  font-size: 0.8rem;
}

body.eco-compact h1 {
  font-size: 1.5rem;
}

body.eco-compact h2 {
  font-size: 1.2rem;
}

body.eco-compact h3 {
  font-size: 1rem;
}

body.eco-compact div.journal {
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

body.eco-compact fieldset,
body.eco-compact .box {
  padding: 1rem;
}

/* ============================================================
   16. Ajax Indicator & Misc Polish
   ============================================================ */

/* Ajax indicator */
#ajax-indicator {
  background: var(--eco-surface);
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-lg);
  box-shadow: var(--eco-shadow-lg);
  color: var(--eco-text);
  font-family: var(--eco-font-body);
  font-size: 0.85rem;
  padding: 12px 20px;
}

/* Flyout menu */
.flyout-menu {
  background: var(--eco-surface);
  color: var(--eco-text);
  border-right: 1px solid var(--eco-border);
  box-shadow: var(--eco-shadow-lg);
}

.flyout-menu a {
  color: var(--eco-text);
  padding: 10px 16px;
  font-size: 0.9rem;
  background-image: none;
  transition: all 0.2s ease;
}

.flyout-menu a:hover {
  background: var(--eco-primary-subtle);
  color: var(--eco-primary);
}

.flyout-menu h3,
.flyout-menu h4 {
  color: var(--eco-text-muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 16px 4px;
}

/* Mobile toggle button */
.mobile-toggle-button {
  color: var(--eco-header-text);
}

/* Watchers list */
ul.watchers li {
  font-size: 0.85rem;
  padding: 4px 0;
}

/* Issues list items */
div.issues .issue {
  padding: 8px 0;
  border-bottom: 1px solid var(--eco-border);
}

div.issues .issue:last-child {
  border-bottom: none;
}

/* Attachments */
div.attachments {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--eco-border);
}

div.attachments p {
  font-size: 0.85rem;
}

div.attachments a {
  background-image: none;
}

/* Autocomplete dropdown */
div.autocomplete {
  background: var(--eco-surface);
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-md);
  box-shadow: var(--eco-shadow-lg);
}

div.autocomplete ul li {
  padding: 6px 12px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

div.autocomplete ul li.selected {
  background: var(--eco-primary-subtle);
  color: var(--eco-primary);
}

/* Print styles */
@media print {
  #header,
  #top-menu,
  #sidebar,
  #footer,
  .contextual,
  .flyout-menu {
    display: none !important;
  }

  #content {
    padding: 0;
    max-width: 100%;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  table.list {
    border: 1px solid #ccc;
  }

  table.list thead th {
    background: #f0f0f0;
  }
}

/* ============================================================
   17. Clean Corporate — Task Management Polish
   ============================================================
   Linear/Notion-style refinements for the PM workflow: calm
   status chips, dot-priority, compact avatar circles, flat
   Gantt bars, and a near-invisible contextual action strip.
   All rules scoped to task surfaces; prose pages untouched.
   ============================================================ */

/* ────────────────────────────────────────────────
   17.1 Status pills — small flat chip, muted colour
   ──────────────────────────────────────────────── */

table.list td.status {
  padding: 10px 12px !important;
  vertical-align: middle;
}

table.list td.status a {
  display: inline-flex;
  align-items: center;
  font-family: var(--eco-font-body);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--eco-radius-full);
  color: #fff !important;
  background-image: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  line-height: 1.4;
  transition: opacity var(--eco-transition);
  border: 1px solid transparent;
}

table.list td.status a:hover {
  opacity: 0.88;
}

/* Default fallback (new / unknown status) */
table.list td.status a {
  background-color: var(--eco-status-new);
}

/* status-1=New, 2=In Progress, 3=Resolved, 4=Feedback,
   5=Closed, 6=Rejected */
tr.status-1 td.status a { background-color: var(--eco-status-new); }
tr.status-2 td.status a { background-color: var(--eco-status-progress); }
tr.status-3 td.status a { background-color: var(--eco-status-done); }
tr.status-4 td.status a { background-color: var(--eco-status-review); }
tr.status-5 td.status a { background-color: var(--eco-status-hold); }
tr.status-6 td.status a { background-color: var(--eco-status-stuck); }

/* Closed issues — no strikethrough, just muted text */
table.list tr.closed td.subject a {
  text-decoration: none;
  color: var(--eco-text-secondary);
}

/* ────────────────────────────────────────────────
   17.2 Priority — colored dot + text, no filled cell
   ──────────────────────────────────────────────── */

table.list td.priority {
  padding: 11px 12px !important;
  vertical-align: middle;
  font-weight: 500;
  font-size: 13px;
  color: var(--eco-text);
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
  position: relative;
  padding-left: 26px !important;
}

table.list td.priority::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--eco-prio-normal);
  box-shadow: 0 0 0 2px var(--eco-surface);
}

tr.priority-1 td.priority::before { background: var(--eco-prio-low); }
tr.priority-2 td.priority::before { background: var(--eco-prio-low); }
tr.priority-3 td.priority::before { background: var(--eco-prio-normal); }
tr.priority-4 td.priority::before { background: var(--eco-prio-high); }
tr.priority-5 td.priority::before { background: var(--eco-prio-urgent); }
tr.priority-6 td.priority::before,
tr.priority-7 td.priority::before { background: var(--eco-prio-immediate); }

tr.priority-4 td.priority { color: var(--eco-prio-high); font-weight: 600; }
tr.priority-5 td.priority { color: var(--eco-prio-urgent); font-weight: 600; }
tr.priority-6 td.priority,
tr.priority-7 td.priority { color: var(--eco-prio-immediate); font-weight: 700; }

/* ────────────────────────────────────────────────
   17.3 Clean issue list rows
   ──────────────────────────────────────────────── */

table.list tbody tr {
  position: relative;
  transition: background-color var(--eco-transition);
}

table.list tbody tr:hover {
  background: var(--eco-surface-sunken);
  box-shadow: none;
}

/* Subject column: medium weight, near-black, ellipsis */
table.list td.subject,
table.list td.subject a {
  font-size: 13px;
  font-weight: 500;
  color: var(--eco-text);
  max-width: 480px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-image: none;
}

table.list td.subject a:hover {
  color: var(--eco-primary);
  background-image: none;
}

/* ────────────────────────────────────────────────
   17.4 Assignee avatar — 24px circle, flat emerald
   ──────────────────────────────────────────────── */

table.list td.assigned_to {
  padding: 10px 12px !important;
}

table.list td.assigned_to a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-image: none;
  color: var(--eco-text);
  font-weight: 500;
  font-size: 13px;
}

table.list td.assigned_to a::before {
  content: attr(data-initials);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--eco-primary);
  color: #fff;
  font-family: var(--eco-font-body);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Fallback dot when no initials attr available */
table.list td.assigned_to a:empty::before,
table.list td.assigned_to a:not([data-initials])::before {
  content: '';
  width: 8px;
  height: 8px;
}

/* ────────────────────────────────────────────────
   17.5 Group headers — quiet, not loud
   ──────────────────────────────────────────────── */

table.list tr.group td,
table.list tr.group {
  background: var(--eco-surface-sunken) !important;
  padding: 10px 16px !important;
  font-family: var(--eco-font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--eco-text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-top: 1px solid var(--eco-border);
  border-bottom: 1px solid var(--eco-border);
  position: relative;
}

table.list tr.group td::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--eco-primary);
  margin-right: 10px;
  vertical-align: middle;
}

table.list tr.group .count {
  color: var(--eco-text-muted);
  font-family: var(--eco-font-body);
  font-weight: 500;
  font-size: 11px;
  margin-left: 8px;
  text-transform: none;
  letter-spacing: 0;
}

table.list tr.group .toggle-all {
  font-size: 10px;
  color: var(--eco-text-muted);
  font-weight: 500;
}

/* ────────────────────────────────────────────────
   17.6 Query filters bar — hairline card
   ──────────────────────────────────────────────── */

#query_form_with_buttons,
#query_form_content {
  background: var(--eco-surface);
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-lg);
  padding: 12px 16px;
  margin-bottom: 16px;
  box-shadow: var(--eco-shadow-sm);
}

#query_form_with_buttons fieldset,
#query_form_content fieldset {
  background: transparent;
  border: none;
  padding: 4px 0;
  margin: 0;
  box-shadow: none;
  border-radius: 0;
}

#query_form_with_buttons fieldset.collapsible,
#query_form_content fieldset.collapsible {
  padding: 4px 0;
}

#query_form_with_buttons fieldset.collapsed,
#query_form_content fieldset.collapsed {
  padding: 4px 0;
}

fieldset#filters legend,
fieldset#options legend,
fieldset.collapsible legend {
  font-family: var(--eco-font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--eco-text-secondary);
  cursor: pointer;
  padding: 0;
  margin-bottom: 6px;
}

/* Filter rows inside #filters table */
#filters table.query-columns,
table.query-columns {
  margin: 6px 0 0;
}

table.query-columns td {
  padding: 3px 6px 3px 0;
  font-size: 13px;
}

fieldset.collapsible legend::before {
  content: '▸ ';
  color: var(--eco-text-muted);
  display: inline-block;
  transition: transform var(--eco-transition);
}

fieldset.collapsible:not(.collapsed) legend::before {
  transform: rotate(90deg);
}

/* ────────────────────────────────────────────────
   17.7 Gantt chart — flat, emerald today marker
   ──────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════
   Gantt chart — polished PM timeline view
   ═══════════════════════════════════════════════
   Redmine's Gantt uses absolutely-positioned <div class="gantt_hdr">
   elements with inline styles (width, height, top, left, background).
   We override the inline backgrounds but leave geometry alone so
   Redmine's JS layout math stays correct. */

/* Outer table wrapping subjects + timeline */
table.gantt {
  background: var(--eco-surface);
  border-radius: var(--eco-radius-lg);
  overflow: hidden;
  box-shadow: var(--eco-shadow-sm);
  border: 1px solid var(--eco-border);
  border-collapse: separate;
  border-spacing: 0;
  margin: 16px 0;
}

table.gantt > tbody > tr > td {
  vertical-align: top;
  padding: 0;
  border: none;
}

.gantt_subjects_container,
td.gantt_subjects_column {
  background: var(--eco-surface);
  border-right: 1px solid var(--eco-border) !important;
}

/* Subject row items — issue titles on the left side */
.gantt_subjects .issue-subject,
.gantt_subjects .project-name,
.gantt_subjects .version-name {
  font-family: var(--eco-font-body);
  font-size: 13px !important;
  color: var(--eco-text);
  line-height: 20px !important;
  padding: 0 4px;
}

.gantt_subjects .project-name {
  font-weight: 600;
  color: var(--eco-text);
}

.gantt_subjects .issue-subject {
  font-weight: 400;
  color: var(--eco-text-secondary);
}

.gantt_subjects .issue-subject a,
.gantt_subjects .project-name a {
  color: var(--eco-text);
  background-image: none;
  font-weight: 500;
}

.gantt_subjects .issue-subject a:hover,
.gantt_subjects .project-name a:hover {
  color: var(--eco-primary);
}

.gantt_subjects .issue-subject .expander,
.gantt_subjects .project-name .expander {
  color: var(--eco-text-muted);
  cursor: pointer;
}

/* Small assignee avatar inside the subject row */
.gantt_subjects .avatar {
  background: var(--eco-primary) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  border: none !important;
}

/* Header cells — Redmine emits these with inline background: #eee
   we need to override with !important so they blend with the theme.
   Keep text sizing minimal so it fits the fixed heights. */
.gantt_hdr {
  font-family: var(--eco-font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--eco-text-secondary) !important;
  background: var(--eco-surface-raised) !important;
  border-color: var(--eco-border) !important;
  text-align: center;
  line-height: 1.3 !important;
  box-sizing: border-box;
}

.gantt_hdr a,
.gantt_hdr .gantt_hdr_link {
  color: var(--eco-text-secondary) !important;
  background-image: none;
  font-weight: 600;
  text-decoration: none;
}

.gantt_hdr a:hover {
  color: var(--eco-primary) !important;
}

/* The border between adjacent header cells — soft hairline */
.gantt_hdr {
  border-right: 1px solid var(--eco-border) !important;
  border-bottom: 1px solid var(--eco-border) !important;
}

/* Non-working day header cells (weekends) */
.gantt_hdr.nwday {
  background: var(--eco-surface-sunken) !important;
  color: var(--eco-text-muted) !important;
}

/* Non-working-day body stripe */
td.nwday {
  background: var(--eco-surface-sunken) !important;
}

/* Selected-column (right-side columns like Status/Priority/Assignee) */
.gantt_selected_column {
  background: var(--eco-surface);
  border-left: 1px solid var(--eco-border) !important;
  border-right: 1px solid var(--eco-border);
  font-size: 12px;
}

.gantt_selected_column_container {
  background: var(--eco-surface);
}

.gantt_hdr_selected_column_name {
  font-family: var(--eco-font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--eco-text-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--eco-surface-raised) !important;
  padding: 0 8px !important;
  line-height: 36px !important;
  border-bottom: 1px solid var(--eco-border) !important;
}

.gantt_selected_column_content {
  font-size: 12px;
  color: var(--eco-text);
  font-weight: 500;
  line-height: 20px;
  padding: 0 8px;
}

/* Today line — Redmine emits #today_line with inline
   border-left: 1px dashed red. Override with !important. */
#today_line {
  border-left: 2px solid var(--eco-primary) !important;
  width: 0 !important;
  box-shadow: 0 0 0 0.5px var(--eco-primary), 0 0 6px rgba(var(--eco-primary-rgb), 0.25);
  z-index: 4 !important;
  pointer-events: none;
}

#today_line::before {
  content: '';
  position: absolute;
  left: -5px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--eco-primary);
  box-shadow: 0 0 0 2px var(--eco-surface),
              0 2px 4px -1px rgba(var(--eco-primary-rgb), 0.35);
}

/* Gantt task bars — flat fills, muted status colors */
.task_todo,
div.task_todo {
  background: var(--eco-status-progress) !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 2px 0 rgba(37, 99, 235, 0.25) !important;
  border: none !important;
  transition: outline var(--eco-transition), filter var(--eco-transition) !important;
}

.task_late,
div.task_late {
  background: var(--eco-status-stuck) !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 2px 0 rgba(220, 38, 38, 0.25) !important;
  border: none !important;
}

.task_done,
div.task_done {
  background: var(--eco-status-done) !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 2px 0 rgba(16, 185, 129, 0.25) !important;
  border: none !important;
}

/* Task bar hover — emerald outline + slight brighten */
.task_todo:hover,
.task_late:hover,
.task_done:hover,
div.task_todo:hover,
div.task_late:hover,
div.task_done:hover {
  outline: 1.5px solid var(--eco-primary) !important;
  outline-offset: 2px !important;
  filter: brightness(1.05);
}

/* Task bar labels (shown inside or next to the bar) */
.task .task_name,
.gantt_task_label {
  color: var(--eco-text-secondary);
  font-family: var(--eco-font-body);
  font-size: 11px;
  font-weight: 500;
  padding: 0 6px;
  line-height: 20px;
}

/* Progress overlay on task bar (darker fill showing % done) */
.task_done.task_late_done {
  filter: brightness(0.92);
}

/* Milestone — small emerald rotated square */
.milestone,
div.milestone {
  background: var(--eco-primary) !important;
  transform: rotate(45deg) !important;
  box-shadow: 0 2px 4px -1px rgba(var(--eco-primary-rgb), 0.35) !important;
  border-radius: 2px !important;
}

/* Gantt row hover in the subjects column */
.gantt_subjects .issue-subject:hover,
.gantt_subjects .project-name:hover {
  background: var(--eco-surface-sunken);
  border-radius: var(--eco-radius-sm);
}

/* ────────────────────────────────────────────────
   17.8 Contextual quick-actions — inline buttons
   ──────────────────────────────────────────────── */

.contextual {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  float: right;
  margin-top: 0;
}

.contextual a {
  padding: 6px 10px !important;
  border-radius: var(--eco-radius-sm) !important;
  font-size: 12px !important;
  font-weight: 500;
  color: var(--eco-text-secondary);
  background-image: none;
  border: 1px solid transparent;
  min-height: auto;
}

.contextual a:hover {
  background: var(--eco-surface-sunken);
  color: var(--eco-text);
  border-color: var(--eco-border);
}

/* ────────────────────────────────────────────────
   17.9 Totals / counts bar above issue lists
   ──────────────────────────────────────────────── */

.query-totals,
p.query-totals {
  font-family: var(--eco-font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--eco-text-secondary);
  margin: 0 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.query-totals::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--eco-primary);
}

/* ────────────────────────────────────────────────
   17.10 Tracker column — quiet colored text
   ──────────────────────────────────────────────── */

table.list td.tracker,
table.list td.type {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--eco-text-secondary);
}

tr.tracker-1 td.tracker { color: var(--eco-tracker-bug); }
tr.tracker-2 td.tracker { color: var(--eco-tracker-feature); }
tr.tracker-3 td.tracker { color: var(--eco-tracker-task); }
tr.tracker-4 td.tracker { color: var(--eco-tracker-support); }

/* Progress bar inside an issue list cell */
table.list td table.progress {
  min-width: 80px;
  height: 6px;
  border-radius: var(--eco-radius-full);
  box-shadow: none;
}

table.list td table.progress td {
  height: 6px;
}

/* ════════════════════════════════════════════════════════════
   18. Projects Index — Notion-style grid
   ════════════════════════════════════════════════════════════
   Redmine markup:
     #projects-index
       ul.projects.root
         li.root
           div.root
             a.project      — project name link
             div.wiki.description — muted description
   ════════════════════════════════════════════════════════════ */

#projects-index {
  margin: 0;
}

#projects-index > ul.projects.root {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

#projects-index ul.projects {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Project card */
#projects-index li.root,
#projects-index li {
  margin: 0;
  padding: 0;
}

#projects-index li.root > div.root,
#projects-index li > div {
  background: var(--eco-surface);
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-lg);
  padding: 18px 20px 16px;
  transition: border-color var(--eco-transition),
              box-shadow var(--eco-transition),
              transform var(--eco-transition);
  position: relative;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#projects-index li.root > div.root:hover,
#projects-index li > div:hover {
  border-color: var(--eco-primary-soft);
  box-shadow: var(--eco-shadow-md);
  transform: translateY(-1px);
}

/* Project name — link becomes the card title, with a generated
   initial square prefix acting as a project icon */
#projects-index a.project {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--eco-font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--eco-text);
  background-image: none;
  letter-spacing: -0.01em;
  line-height: 1.3;
  min-height: 32px;
}

#projects-index a.project::before {
  content: attr(data-initial, '');
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: var(--eco-radius-md);
  background: linear-gradient(135deg, var(--eco-primary) 0%, var(--eco-primary-active) 100%);
  color: #fff;
  font-family: var(--eco-font-heading);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  flex-shrink: 0;
  box-shadow: var(--eco-shadow-brand);
}

/* If no data-initial attr is set, show first character via ::first-letter
   on a pseudo-wrapped fallback. Since we can't dynamically read text with
   pure CSS, fall back to a small emerald square dot. */
#projects-index a.project:not([data-initial])::before {
  content: '';
  width: 32px;
  height: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

#projects-index a.project:hover {
  color: var(--eco-primary);
  background-image: none;
}

/* Project description — NOT a nested card, just muted prose */
#projects-index div.wiki.description {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  color: var(--eco-text-secondary);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  /* Clamp long descriptions to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#projects-index div.wiki.description p {
  margin: 0;
  color: inherit;
  font-size: inherit;
}

#projects-index div.wiki.description a {
  color: var(--eco-primary);
  background-image: none;
}

/* Child projects (nested below parent card) */
#projects-index ul.projects li div {
  padding: 10px 14px;
  min-height: auto;
  background: var(--eco-surface-raised);
  border-radius: var(--eco-radius-md);
  margin-top: 8px;
}

#projects-index ul.projects li a.project {
  font-size: 13px;
  min-height: 24px;
}

#projects-index ul.projects li a.project::before {
  width: 24px;
  height: 24px;
  min-width: 24px;
  font-size: 11px;
  border-radius: var(--eco-radius-sm);
}

/* "My projects / My bookmarks" switch row at the bottom */
#content > p.other-formats + p,
p.projects-my-menu {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  font-size: 12px;
  color: var(--eco-text-muted);
  margin-top: 20px;
}

/* ════════════════════════════════════════════════════════════
   19. Query form refinements — calmer, more compact
   ════════════════════════════════════════════════════════════ */

/* Apply / Clear / Save buttons at the bottom of the filter card */
p.buttons {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--eco-border);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

p.buttons a.icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--eco-radius-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--eco-text-secondary);
  background-image: none;
  background-color: transparent;
  border: 1px solid transparent;
  transition: background var(--eco-transition), color var(--eco-transition), border-color var(--eco-transition);
}

p.buttons a.icon:hover {
  background: var(--eco-surface-sunken);
  color: var(--eco-text);
  border-color: var(--eco-border);
}

p.buttons a.icon-checked {
  background: var(--eco-primary);
  color: #fff;
  border-color: var(--eco-primary);
}

p.buttons a.icon-checked:hover {
  background: var(--eco-primary-hover);
  color: #fff;
  border-color: var(--eco-primary-hover);
}

p.buttons a.icon .icon-svg {
  width: 14px;
  height: 14px;
}

/* Stronger override for filter/options fieldset nested inside
   the query form — the parent .box/fieldset global rule kept
   adding a white card inside a white card. */
#query_form_with_buttons fieldset,
#query_form_with_buttons fieldset.collapsible,
#query_form_with_buttons fieldset.collapsed,
#query_form_content fieldset,
#query_form_content fieldset.collapsible,
#query_form_content fieldset.collapsed {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

#query_form_with_buttons fieldset + fieldset,
#query_form_content fieldset + fieldset {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--eco-border) !important;
}

/* ════════════════════════════════════════════════════════════
   20. Sidebar form elements (activity scope, filters, etc.)
   ════════════════════════════════════════════════════════════
   When the right sidebar contains a <form> instead of nav links
   (activity page, custom query editor, etc), our generic
   #sidebar ul li a nav-row styling doesn't apply. These rules
   override to make form rows clean and aligned. */

#sidebar #sidebar-wrapper,
#sidebar form {
  padding: 0;
}

#sidebar form h3 {
  margin: 0 0 12px;
  padding: 0;
}

/* Paragraph rows in the sidebar (date input, user select) */
#sidebar form p {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--eco-text-secondary);
}

#sidebar form p label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--eco-text-muted);
}

/* Date + select inputs in the sidebar: fit the narrow width */
#sidebar form input[type="date"],
#sidebar form input[type="text"],
#sidebar form select {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  font-size: 13px !important;
  min-height: 32px !important;
  padding: 6px 10px !important;
  box-sizing: border-box;
}

#sidebar form select {
  padding-right: 28px !important;
  background-position: right 8px center !important;
}

/* ── Sidebar checkbox list (activity scope filters) ── */

#sidebar form ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

#sidebar form ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: var(--eco-radius-md);
  transition: background var(--eco-transition);
  min-height: 30px;
}

#sidebar form ul li:hover {
  background: var(--eco-surface-sunken);
}

#sidebar form ul li input[type="checkbox"] {
  margin: 0 !important;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  min-height: 0 !important;
  padding: 0 !important;
  accent-color: var(--eco-primary);
  cursor: pointer;
}

#sidebar form ul li label {
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--eco-text);
  cursor: pointer;
  flex: 1;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
}

/* The label contains an <a> — strip link styling, inherit label color */
#sidebar form ul li label a {
  color: inherit !important;
  font-weight: inherit;
  background-image: none;
}

#sidebar form ul li label a:hover {
  color: var(--eco-primary) !important;
}

/* Apply button at the bottom of the scope form */
#sidebar form input[type="submit"],
#sidebar form p.buttons input[type="submit"] {
  width: 100%;
  margin-top: 8px;
}

/* Sidebar h3 that DOES appear inside the wrapper (not inside a form) */
#sidebar-wrapper > h3,
#sidebar > h3 {
  padding: 0 12px;
}

/* ════════════════════════════════════════════════════════════
   21. Pagination — compact Linear-style pager
   ════════════════════════════════════════════════════════════ */

ul.pages,
.pagination ul.pages {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}

ul.pages li {
  display: inline-flex;
  margin: 0;
}

ul.pages li a,
ul.pages li span.current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--eco-radius-md);
  font-size: 12px;
  font-weight: 600;
  color: var(--eco-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  background-image: none;
  transition: background var(--eco-transition), color var(--eco-transition), border-color var(--eco-transition);
}

ul.pages li a:hover {
  background: var(--eco-surface-sunken);
  color: var(--eco-text);
  border-color: var(--eco-border);
}

ul.pages li span.current {
  background: var(--eco-primary);
  color: #fff;
  border-color: var(--eco-primary);
}

ul.pages li.previous a,
ul.pages li.next a {
  gap: 4px;
  padding: 0 14px;
}

/* "Also available in: Atom" row — quiet and right-aligned under content */
p.other-formats {
  font-size: 11px;
  color: var(--eco-text-muted);
  margin: 20px 0 0;
  text-align: right;
}

p.other-formats a {
  font-size: 11px;
  font-weight: 600;
  color: var(--eco-primary-active);
}

/* ════════════════════════════════════════════════════════════
   22. "+" New subproject button in the main menu
   ════════════════════════════════════════════════════════════ */

/* The "add subproject" button that appears as a "+" in the main
   menu on project pages — make it a quiet icon button */
#main-menu li a.icon-add,
#main-menu li a[class*="add-"] {
  padding: 6px 10px !important;
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-md);
  background: transparent;
  color: var(--eco-text-muted) !important;
  border-bottom: 1px solid var(--eco-border) !important;
  margin: 6px 4px 6px 0;
  min-height: auto;
}

#main-menu li a.icon-add:hover {
  color: var(--eco-primary) !important;
  border-color: var(--eco-primary);
  background: var(--eco-primary-subtle);
  border-bottom-color: var(--eco-primary) !important;
}

#main-menu li a.icon-add .icon-svg,
#main-menu li a.icon-add .icon-label {
  color: inherit;
}

/* Hide the "Add" text label, show only the icon */
#main-menu li a.icon-add .icon-label {
  display: none;
}

/* ════════════════════════════════════════════════════════════
   23. Wiki editor & rich-text toolbar (jstoolbar)
   ════════════════════════════════════════════════════════════
   Redmine uses a <div class="jstEditor"> containing a toolbar of
   <button class="jstb_strong|jstb_em|jstb_ins|...">icons</button>,
   plus "Edit"/"Preview" tabs at the top. Each button has its icon
   rendered as an inline SVG child or via ::before. Don't clobber
   them with secondary-button styling. */

.jstEditor,
.tab-elements {
  border-radius: var(--eco-radius-lg);
  overflow: visible;
}

/* The toolbar row itself */
.jstBlock,
.jstToolbar,
.jstEditor .toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  background: var(--eco-surface-raised);
  border: 1px solid var(--eco-border);
  border-bottom: none;
  border-radius: var(--eco-radius-md) var(--eco-radius-md) 0 0;
  margin: 0;
}

/* Toolbar buttons — kept as transparent icon buttons with hover.
   These selectors win over the generic button rule via specificity. */
.jstBlock button,
.jstToolbar button,
.jstEditor button[class*="jstb_"],
button[class*="jstb_"] {
  background-color: transparent !important;
  background-image: none;
  border: 1px solid transparent !important;
  padding: 4px !important;
  min-width: 28px;
  min-height: 28px !important;
  border-radius: var(--eco-radius-sm) !important;
  box-shadow: none !important;
  color: var(--eco-text-secondary) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px !important;
  font-weight: 500;
  transition: background-color var(--eco-transition), color var(--eco-transition);
}

.jstBlock button:hover,
.jstToolbar button:hover,
.jstEditor button[class*="jstb_"]:hover,
button[class*="jstb_"]:hover {
  background-color: var(--eco-surface) !important;
  color: var(--eco-primary) !important;
  border-color: var(--eco-border) !important;
  transform: none;
}

.jstBlock button:active,
button[class*="jstb_"]:active {
  background-color: var(--eco-primary-subtle) !important;
  color: var(--eco-primary-active) !important;
}

/* SVG icons inside toolbar buttons */
.jstBlock button .icon-svg,
.jstToolbar button .icon-svg,
button[class*="jstb_"] .icon-svg,
button[class*="jstb_"] svg {
  width: 16px !important;
  height: 16px !important;
  color: inherit;
  fill: currentColor;
  stroke: currentColor;
}

/* Small separator between toolbar button groups */
.jstBlock .jstb_sep,
.jstToolbar .jstb_sep {
  width: 1px;
  height: 18px;
  background: var(--eco-border);
  margin: 0 4px;
  display: inline-block;
}

/* The textarea under the toolbar — flush with toolbar, tone down focus */
.jstEditor textarea,
.wiki-edit textarea {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  margin-top: -1px !important;
  min-height: 320px !important;
  font-family: var(--eco-font-mono) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  padding: 14px !important;
}

/* Softer focus ring for big textareas — they amplify the glow visually.
   Use a 2px ring instead of 3px so it doesn't look overpowering. */
.jstEditor textarea:focus,
.wiki-edit textarea:focus,
textarea:focus {
  border-color: var(--eco-primary);
  box-shadow: 0 0 0 2px var(--eco-primary-subtle);
  outline: none;
}

/* Edit / Preview tabs at the top of the wiki editor */
.tab-elements {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--eco-border);
  background: transparent;
}

.tab-elements .tab-element,
.tab-elements li {
  margin: 0;
  padding: 0;
  display: inline-block;
}

.tab-elements button {
  background-color: transparent !important;
  background-image: none;
  border: none !important;
  box-shadow: none !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 500;
  color: var(--eco-text-secondary) !important;
  cursor: pointer;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  margin-bottom: -1px;
  min-height: auto !important;
  transition: color var(--eco-transition), border-color var(--eco-transition);
}

.tab-elements button:hover {
  color: var(--eco-text) !important;
  background-color: transparent !important;
  border-color: transparent !important;
  border-bottom-color: var(--eco-border-strong) !important;
}

.tab-elements button.selected,
.tab-elements button[aria-selected="true"] {
  color: var(--eco-primary) !important;
  border-bottom-color: var(--eco-primary) !important;
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   24. Z-index stacking — popups must sit above the header
   ════════════════════════════════════════════════════════════
   #header has z-index: 100 for the sticky project bar. Any popup
   or floating UI (context menu, autocomplete, date picker, modal,
   flyout menu) must stack above that or it gets clipped. */

#context-menu,
div.context-menu,
.ui-autocomplete,
div.autocomplete,
.ui-datepicker,
#ajax-modal,
.tribute-container,
.flyout-menu__container,
div.ui-dialog,
.ui-menu {
  z-index: 10000 !important;
}

/* Redmine context menu visual polish — Notion-style floating menu */
#context-menu {
  background: var(--eco-surface);
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-lg);
  box-shadow: var(--eco-shadow-lg),
              0 0 0 1px rgba(9, 9, 11, 0.04);
  padding: 6px;
  font-family: var(--eco-font-body);
  font-size: 13px;
  min-width: 220px;
}

#context-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#context-menu li {
  margin: 0;
  padding: 0;
  position: relative;
}

#context-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--eco-radius-sm);
  color: var(--eco-text);
  font-size: 13px;
  font-weight: 500;
  background-image: none;
  background-color: transparent;
  transition: background-color var(--eco-transition), color var(--eco-transition);
  text-decoration: none;
  white-space: nowrap;
}

#context-menu a:hover,
#context-menu li.selected > a,
#context-menu a.selected {
  background-color: var(--eco-primary-subtle);
  color: var(--eco-primary-active);
}

#context-menu a .icon-svg {
  width: 14px;
  height: 14px;
  color: var(--eco-text-muted);
  flex-shrink: 0;
}

#context-menu a:hover .icon-svg {
  color: var(--eco-primary);
}

/* Submenu arrow indicator */
#context-menu li.folder > a::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 4px solid var(--eco-text-muted);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  margin-left: auto;
  flex-shrink: 0;
}

#context-menu li.folder:hover > a::after {
  border-left-color: var(--eco-primary);
}

/* Separator line between menu groups */
#context-menu li.separator,
#context-menu hr {
  height: 1px;
  background: var(--eco-border);
  margin: 4px 6px;
  border: none;
  padding: 0;
}

#context-menu li.separator {
  pointer-events: none;
}

/* Nested submenu panel */
#context-menu ul ul {
  position: absolute;
  left: 100%;
  top: -6px;
  margin-left: 4px;
  background: var(--eco-surface);
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-lg);
  box-shadow: var(--eco-shadow-lg);
  padding: 6px;
  min-width: 180px;
  z-index: 10001 !important;
}

/* Destructive menu items (Delete issue) */
#context-menu a[href*="destroy"],
#context-menu li.destroy a,
#context-menu a.delete,
#context-menu a[class*="delete"] {
  color: var(--eco-danger);
}

#context-menu a[href*="destroy"]:hover,
#context-menu li.destroy a:hover,
#context-menu a.delete:hover {
  background-color: var(--eco-danger-subtle);
  color: var(--eco-danger);
}