/* ematrix theme for Redmine
 * Inspired by etweek's monochrome design system (shadcn/ui-derived).
 *
 * Cascade order:
 *   1. Redmine base application.css (lowest priority)
 *   2. ematrix overrides below       (highest — defines final look)
 *
 * Note: Bleuclair was initially considered as a chassis, but Redmine's
 *   asset transition map does not rewrite theme→theme @import URLs
 *   (only theme→default_asset_path links are auto-digested). The override
 *   set below is comprehensive enough to stand alone on top of Redmine base.
 */

@import url("/assets/application-f9561cc7.css");

/* ============================================================
   Design tokens — derived from user-supplied palette
   (Deep Periwinkle, Light Lavender, Sage Grey, Soft Sage, Pale Chartreuse)
   Cool editorial / muted geometric tone — no warm hues, sage + periwinkle.
   ============================================================ */
:root {
  /* Surface — body stays white for content readability.
     Body text anchors to a cool dark (periwinkle-darkened) so it
     harmonizes with the palette's blue-cool mood, still AAA on white. */
  --em-bg:           #ffffff;
  --em-fg:           #2A2E3E;            /* cool dark periwinkle, AAA on white */
  --em-card:         #ffffff;
  --em-card-border:  rgba(95, 107, 145, 0.12);
  --em-sidebar-bg:   #F2F4ED;            /* cool sage-cream panel */

  /* Muted (cool sage-tinted neutrals) */
  --em-muted:        #EEF0EA;            /* very pale sage-cream */
  --em-muted-fg:     #6B7388;            /* cool muted text, AA on white */
  --em-border:       #D9DCD3;            /* sage hairline */

  /* Primary — header/menu chrome.
     Deep Periwinkle is the darkest palette member; white text on it = ~5:1 (AA). */
  --em-primary:      #5F6B91;            /* Deep Periwinkle */
  --em-primary-fg:   #ffffff;

  /* Brand strip / wayfinding indicator — Pale Chartreuse (slightly intensified).
     Mirrors the mockup's pattern: chartreuse pop against deep periwinkle chrome.
     Used only as decorative bars/borders (no text), so its low contrast
     vs white content is fine — it sits on periwinkle/white edges. */
  --em-brand:        #D5DF8C;            /* Pale Chartreuse intensified */

  /* Accent — Deep Periwinkle direct (AA on white at 5:1, no darkening needed).
     Links share the same hue as the header — strong visual identity. */
  --em-accent:       #5F6B91;            /* Deep Periwinkle, AA on white */
  --em-accent-hover: #4B5781;            /* darker periwinkle on hover */
  --em-accent-fg:    #ffffff;
  --em-accent-soft:  #D8DCEB;            /* periwinkle very light — focus halo, selection */
  --em-accent-bold:  #969FB8;            /* Light Lavender — decorative bars/badges */
  --em-accent-pop:   #BAC9A8;            /* Soft Sage — fresh decorative accent */
  --em-accent-pop-soft: #E1E9AE;         /* Pale Chartreuse raw — soft tint */

  /* Destructive (delete/error/contextual action text) — muted brick.
     Palette has no warm hue, so this introduces a complementary terracotta
     that harmonizes with the earthy mood. #B85450 on white = 5.8:1 (AA pass). */
  --em-destructive:    #B85450;          /* muted brick (introduced for danger states) */
  --em-destructive-fg: #ffffff;

  /* Geometry */
  --em-radius:    0.625rem;   /* 10px - cards, panels */
  --em-radius-sm: 0.375rem;   /* 6px - buttons, inputs */
  --em-radius-xs: 0.25rem;    /* 4px - tags, badges */

  /* Elevation */
  --em-shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.03);
  --em-shadow:    0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);

  /* Typography */
  --em-font: "Noto Sans KR", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============================================================
   Global typography + canvas
   ============================================================ */
html, body {
  background: var(--em-bg);
  color: var(--em-fg);
  font-family: var(--em-font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--em-font);
  color: var(--em-fg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1 { font-size: 1.5rem;   margin-bottom: 1.25rem; }
h2 { font-size: 1.25rem;  margin-bottom: 1rem;    border-bottom: none; padding-bottom: 0; }
h3 { font-size: 1.0625rem; margin-bottom: 0.75rem; }

p, li { color: var(--em-fg); }

/* ============================================================
   Header & top navigation
   ============================================================ */
#header {
  background: var(--em-primary);
  color: var(--em-primary-fg);
  border-bottom: 3px solid var(--em-brand);         /* warm brand strip (Rosy Copper) */
  padding: 14px 28px;
  box-shadow: var(--em-shadow-sm);
}

#header h1, #header h1 a {
  color: var(--em-primary-fg);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

#header a, #header a:visited { color: rgba(255, 255, 255, 0.85); }
#header a:hover { color: var(--em-primary-fg); text-decoration: none; }

#quick-search input.small {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--em-radius-sm);
  color: var(--em-primary-fg);
  padding: 6px 10px;
}
#quick-search input.small::placeholder { color: rgba(255, 255, 255, 0.5); }

#top-menu {
  background: var(--em-primary);
  color: var(--em-primary-fg);
  padding: 0 28px;
  font-size: 0.8125rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#top-menu a {
  color: rgba(255, 255, 255, 0.7);
  padding: 8px 12px;
  transition: color 0.15s;
}

#top-menu a:hover { color: var(--em-primary-fg); text-decoration: none; }
#top-menu #account a { color: rgba(255, 255, 255, 0.85); }

/* ============================================================
   Main navigation tabs (project-level menu under header)
   ============================================================ */
#main-menu {
  background: var(--em-primary);
  padding: 0 24px;
  border-bottom: 1px solid var(--em-border);
}

#main-menu ul li {
  margin: 0 2px;
}

#main-menu ul li a {
  color: rgba(255, 255, 255, 0.65);
  background: transparent;
  padding: 6px 14px;                       /* tightened — was 10px 16px */
  border-radius: var(--em-radius-sm) var(--em-radius-sm) 0 0;
  font-weight: 500;
  font-size: 0.8125rem;                    /* was 0.875rem */
  line-height: 1.3;
  transition: all 0.15s;
  border: none;
  /* Reserve 3px on top so non-selected tabs don't shift vertically
     when their selected sibling shows the red accent bar. */
  border-top: 3px solid transparent;
}

#main-menu ul li a:hover {
  color: var(--em-primary-fg);
  background: rgba(255, 255, 255, 0.06);
}

#main-menu ul li a.selected {
  background: var(--em-bg);
  color: var(--em-fg);
  border: 1px solid var(--em-border);
  border-top: 3px solid var(--em-brand);         /* warm active-tab indicator (Rosy Copper) */
  border-bottom: 1px solid var(--em-bg);
  position: relative;
  top: 1px;
}

/* ============================================================
   Main content area & sidebar
   ============================================================ */
#main {
  background: var(--em-bg);
}

#content {
  background: var(--em-bg);
  margin: 24px;
  padding: 28px 32px;
  border-radius: var(--em-radius);
  border: 1px solid var(--em-card-border);
  box-shadow: var(--em-shadow);
}

#sidebar {
  background: var(--em-sidebar-bg);
  border-left: 1px solid var(--em-border);
  padding: 24px 20px;
}

#sidebar h3 {
  color: var(--em-muted-fg);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

#sidebar a {
  color: var(--em-fg);
  display: block;
  padding: 6px 8px;
  margin: 1px -8px;
  border-radius: var(--em-radius-sm);
  transition: background 0.15s;
}

#sidebar a:hover {
  background: var(--em-muted);
  text-decoration: none;
}

#sidebar a.selected,
#sidebar ul.menu_root li a.selected {
  background: var(--em-primary);
  color: var(--em-primary-fg);
}

/* ============================================================
   Boxes / panels / fieldsets (Redmine's main surface containers)
   ============================================================ */
div.box, fieldset.box, .splitcontent .splitcontentleft, .splitcontent .splitcontentright {
  background: var(--em-card);
  border: 1px solid var(--em-card-border);
  border-radius: var(--em-radius);
  padding: 20px 22px;
  box-shadow: var(--em-shadow-sm);
  margin-bottom: 16px;
}

fieldset.box legend, legend {
  color: var(--em-muted-fg);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 8px;
  background: var(--em-card);
}

/* ============================================================
   Tables (Redmine's bread & butter — issue lists, time entries, etc)
   ============================================================ */
table.list {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--em-border);
  border-radius: var(--em-radius);
  overflow: hidden;
  background: var(--em-card);
  font-size: 0.875rem;
  width: 100%;
}

table.list thead th,
table.list thead tr.header th,
table.list thead.text-align-center tr th {
  background: var(--em-muted);
  color: var(--em-muted-fg);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--em-border);
  border-top: none;
  padding: 10px 12px;
  text-align: left;
}

table.list tbody td {
  border: none;
  border-bottom: 1px solid var(--em-border);
  padding: 10px 12px;
  background: var(--em-card);
  color: var(--em-fg);
}

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

table.list tbody tr:hover td,
table.list tbody tr.odd:hover td,
table.list tbody tr.even:hover td {
  background: var(--em-muted);
}

table.list tbody tr.odd td  { background: var(--em-card); }
table.list tbody tr.even td { background: var(--em-card); }

tr.issue.idnt-1 td.subject { padding-left: 18px; }
tr.issue td.id { color: var(--em-muted-fg); font-variant-numeric: tabular-nums; }

/* ============================================================
   Links
   ----
   Redmine base sets `a, a:link, a:visited { color: #169 }` (specificity
   0,0,1,1 for the :link variant). Match that specificity so our accent
   wins for default (:link) state, not just naked <a>.
   ============================================================ */
a, a:link, a:visited {
  color: var(--em-accent);
  text-decoration: none;
}

a:hover, a:link:hover, a:visited:hover {
  color: var(--em-accent-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#content a.issue { color: var(--em-accent); }
#content a.issue.closed { color: var(--em-muted-fg); text-decoration: line-through; }

/* Header/menu links are forced light against the dark primary surface;
   don't let the accent rule above steal them back to blue. */
#header a, #header a:link, #header a:visited,
#top-menu a, #top-menu a:link, #top-menu a:visited,
#main-menu ul li a, #main-menu ul li a:link, #main-menu ul li a:visited {
  color: rgba(255, 255, 255, 0.85);
}
#main-menu ul li a.selected,
#main-menu ul li a.selected:link,
#main-menu ul li a.selected:visited {
  color: var(--em-fg);
}

/* Action/CTA links — "New X", contextual add buttons, "edit"/"delete"
   on toolbars — get Brick Ember so the brand red has constant presence
   across pages, not only on error states. SVG icon strokes match. */
#content .contextual a:not(.button),
#content .contextual a:not(.button):link,
#content .contextual a:not(.button):visited,
#content a.icon-add, #content a.icon-add:link, #content a.icon-add:visited,
#content p.buttons a.icon, #content p.buttons a.icon:link, #content p.buttons a.icon:visited {
  color: var(--em-destructive);
}
#content .contextual a:not(.button):hover,
#content a.icon-add:hover,
#content p.buttons a.icon:hover {
  color: var(--em-destructive);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#content .contextual a:not(.button) svg.icon-svg,
#content a.icon-add svg.icon-svg,
#content p.buttons a.icon svg.icon-svg {
  stroke: var(--em-destructive);
}

/* ============================================================
   Buttons & form actions
   ============================================================ */
input[type="submit"],
input[type="button"],
button.button,
a.button,
.button {
  background: var(--em-primary);
  color: var(--em-primary-fg);
  border: 1px solid var(--em-primary);
  border-radius: var(--em-radius-sm);
  padding: 7px 16px;
  font-weight: 500;
  font-family: var(--em-font);
  font-size: 0.875rem;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.05s;
  line-height: 1.4;
  display: inline-block;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button.button:hover,
a.button:hover,
.button:hover {
  opacity: 0.88;
  text-decoration: none;
  color: var(--em-primary-fg);
}

input[type="submit"]:active {
  transform: translateY(1px);
}

input[type="submit"][name="cancel"],
a.cancel,
input.cancel {
  background: var(--em-card);
  color: var(--em-fg);
  border: 1px solid var(--em-border);
}

input[type="submit"][name="cancel"]:hover,
a.cancel:hover,
input.cancel:hover {
  background: var(--em-muted);
  color: var(--em-fg);
}

/* ============================================================
   Form inputs
   ----
   Redmine base sets `input, select, button { height: 24px; padding: 0 7px }`
   (app/assets/stylesheets/application.css:619). Our padding+line-height
   would clip text inside that 24px box, so we explicitly release the
   height constraint (auto) and let our padding drive the box.
   ============================================================ */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
textarea,
select {
  border: 1px solid var(--em-border);
  border-radius: var(--em-radius-sm);
  padding: 6px 11px;
  font-family: var(--em-font);
  font-size: 0.875rem;
  background: var(--em-bg);
  color: var(--em-fg);
  transition: border-color 0.15s, box-shadow 0.15s;
  line-height: 1.4;
  height: auto;
  box-sizing: border-box;
}

/* Native select needs its own padding-right for the custom arrow glyph
   (Redmine base sets `-webkit-appearance: none` + an inline SVG arrow),
   and a min-height so single-line options aren't visually cramped. */
select {
  min-height: 32px;
  padding-right: 28px;
}
textarea {
  min-height: 5em;
  line-height: 1.55;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--em-accent);
  box-shadow: 0 0 0 3px var(--em-accent-soft);
}

/* ============================================================
   Status messages (flash, errors) — light-mode palette tones.
   Redmine base layers two rules per flash type:
     1. `div.flash.<kind>` with bare background-color
     2. `div.flash.<kind>:not(:has(svg))` with shorthand background+icon URL
   We have to match BOTH layers to win, otherwise the shorthand wipes
   our color back to Redmine's defaults. Error tone uses Brick Ember.
   ============================================================ */
div.flash.notice,
#flash_notice {
  background-color: #E0EBCA;       /* Soft Sage light tint */
  border: 1px solid #B7C8A1;
  color: #4D6045;                  /* dark sage text, AA on light bg */
  border-radius: var(--em-radius-sm);
  padding: 10px 14px;
}
div.flash.notice:not(:has(svg)) {
  background: url("/assets/true-e804d786.png") 8px 50% no-repeat #E0EBCA;
}
div.flash.notice svg.icon-svg { stroke: #4D6045; }

div.flash.error,
.flash.error,
#errorExplanation {
  background-color: #F4DDD9;       /* muted brick at ~92% lightness */
  border: 1px solid #DCAFA9;
  color: var(--em-destructive);
  border-radius: var(--em-radius-sm);
  padding: 10px 14px;
}
div.flash.error:not(:has(svg)),
#errorExplanation:not(:has(svg)) {
  background: url("/assets/exclamation-be65640f.png") 8px 50% no-repeat #F4DDD9;
}
div.flash.error svg.icon-svg,
#errorExplanation svg.icon-svg { stroke: var(--em-destructive); }

div.flash.warning,
.conflict {
  background-color: #F0EBC8;       /* pale chartreuse-amber */
  border: 1px solid #D9CF94;
  color: #6F6326;                  /* dark mustard text, AA on light bg */
  border-radius: var(--em-radius-sm);
  padding: 10px 14px;
}
div.flash.warning:not(:has(svg)) {
  background: url("/assets/warning-699c1e00.png") 8px 50% no-repeat #F0EBC8;
}
div.flash.warning svg.icon-svg { stroke: #6F6326; }

/* ============================================================
   Tags, badges, labels
   ============================================================ */
.tag-label, .badge, span.tag {
  background: var(--em-muted);
  color: var(--em-muted-fg);
  border-radius: var(--em-radius-xs);
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid var(--em-border);
}

/* ============================================================
   Pagination
   ============================================================ */
.pagination, span.pagination {
  margin-top: 1rem;
}

.pagination li a, .pagination span.current,
ul.pages li a, ul.pages li span.current {
  border-radius: var(--em-radius-sm);
  padding: 6px 10px;
  font-size: 0.8125rem;
  border: 1px solid var(--em-border);
  margin: 0 1px;
  color: var(--em-fg);
  background: var(--em-card);
}

.pagination li a:hover, ul.pages li a:hover {
  background: var(--em-muted);
  text-decoration: none;
}

.pagination li.current, .pagination span.current,
ul.pages li span.current {
  background: var(--em-primary);
  color: var(--em-primary-fg);
  border-color: var(--em-primary);
}

/* ============================================================
   Footer
   ============================================================ */
#footer {
  background: var(--em-bg);
  color: var(--em-muted-fg);
  border-top: 1px solid var(--em-border);
  padding: 16px 28px;
  font-size: 0.75rem;
  text-align: center;
}

#footer a { color: var(--em-muted-fg); }
#footer a:hover { color: var(--em-fg); }

/* ============================================================
   Tabs (issue details, project pages, admin sub-tabs)
   ----
   Redmine base uses `#content .tabs ul li a.selected` (0,1,3,1).
   Match that specificity with the same `#content` prefix so our
   palette wins for selected/non-selected states.
   ============================================================ */
#content .tabs ul li a,
#content .tabs ul li a:link,
#content .tabs ul li a:visited {
  background: var(--em-card);
  color: var(--em-muted-fg);
  border: 1px solid var(--em-border);
  border-radius: var(--em-radius-sm) var(--em-radius-sm) 0 0;
  padding: 8px 14px;
  font-weight: 500;
  font-size: 0.875rem;
  box-shadow: none;
}

#content .tabs ul li a.selected,
#content .tabs ul li a.selected:link,
#content .tabs ul li a.selected:visited {
  background-color: var(--em-bg);
  color: var(--em-fg);
  border: 1px solid var(--em-border);
  border-top: 3px solid var(--em-brand);   /* Rosy Copper active accent — matches main-menu */
  border-bottom: 1px solid var(--em-bg);
  position: relative;
  top: 1px;
  box-shadow: none;
}

#content .tabs ul li a:hover {
  background: var(--em-muted);
  color: var(--em-fg);
  text-decoration: none;
}
#content .tabs ul li a.selected:hover { background-color: var(--em-bg); }

/* ============================================================
   Misc — soft transitions for everything
   ============================================================ */
* {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: var(--em-accent-soft);
  color: var(--em-fg);
}

/* Scrollbar — subtle, monochrome */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--em-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--em-border);
  border-radius: 5px;
  border: 2px solid var(--em-bg);
}

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