/*
 * Redmine lapis theme — deep blue palette
 *
 * コンセプト: 知的・信頼・現代的
 * ラピスラズリ (lapis lazuli) の深い青を基調に、
 * 現代的な SaaS プロダクトの設計思想を反映する。
 *
 * Redmine 6.x: テーマ CSS はデフォルト CSS を置き換えるため
 * 先頭で @import が必須。レイアウト (float / position) は変更しない。
 */

@import url("/assets/application-4381d286.css");
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDGothic:wght@400;700&display=swap');

/* ============================================================
   Design Tokens
   ============================================================ */
:root {
  /* Primary — vivid blue (trust, intelligence, modern SaaS) */
  --lp-primary:        #2563EB;
  --lp-primary-dark:   #1D4ED8;
  --lp-primary-light:  #EFF6FF;
  --lp-primary-muted:  #DBEAFE;
  --lp-primary-ring:   rgba(37, 99, 235, .18);

  /* Navigation — deep navy */
  --lp-navy:           #1E3A8A;
  --lp-navy-dark:      #172554;

  /* Surface */
  --lp-surface:        #F8FAFC;
  --lp-card:           #FFFFFF;
  --lp-border:         #E2E8F0;
  --lp-border-light:   #F1F5F9;

  /* Text */
  --lp-text:           #0F172A;
  --lp-text-sub:       #64748B;
  --lp-text-muted:     #94A3B8;

  /* Semantic */
  --lp-success:        #059669;
  --lp-success-bg:     #F0FDF4;
  --lp-success-border: #6EE7B7;
  --lp-warning:        #D97706;
  --lp-warning-bg:     #FFFBEB;
  --lp-warning-border: #FCD34D;
  --lp-danger:         #DC2626;
  --lp-danger-bg:      #FEF2F2;
  --lp-danger-border:  #FCA5A5;

  /* Shape */
  --lp-radius:         6px;
  --lp-radius-lg:      10px;
  --lp-shadow-sm:      0 1px 2px rgba(0,0,0,.06);
  --lp-shadow:         0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --lp-shadow-md:      0 4px 8px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --lp-shadow-lg:      0 10px 24px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.06);
  --lp-transition:     .15s ease;

  /* Typography */
  --lp-font: 'BIZ UDGothic', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
             Meiryo, 'Yu Gothic UI', 'Yu Gothic', sans-serif;
}

/* ============================================================
   Base
   ============================================================ */
body {
  font-family: var(--lp-font);
  color: var(--lp-text);
  background: var(--lp-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Redmine uses a:link, a:visited specificity (0,0,1,1) */
a, a:link, a:visited { color: var(--lp-primary); }
a:hover               { color: var(--lp-primary-dark); text-decoration: none; }

/* ============================================================
   Top Menu — 最深部ネイビー (権威・簡潔)
   ============================================================ */
#top-menu {
  background: var(--lp-navy-dark);
  background-image: none;
  color: rgba(255,255,255,.65);
  border-bottom: none;
  font-size: 0.8rem;
}

#top-menu a, #top-menu a:link, #top-menu a:visited {
  color: rgba(255,255,255,.65);
  transition: color var(--lp-transition);
}
#top-menu a:hover { color: rgba(255,255,255,.95); }
#top-menu #account a,
#top-menu #account a:link,
#top-menu #account a:visited { color: rgba(255,255,255,.65); }

/* ============================================================
   Header — ディープネイビー (信頼・知性)
   ============================================================ */
#header {
  background: var(--lp-navy);
  background-image: none;
  color: #fff;
  border-bottom: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

#header a, #header a:link, #header a:visited { color: rgba(255,255,255,.9); }
#header a:hover { color: #fff; }

#header h1 {
  color: #fff;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* Quick search */
#quick-search #q {
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--lp-radius);
  background: rgba(255,255,255,.1);
  color: #fff;
  transition: background var(--lp-transition), border-color var(--lp-transition),
              box-shadow var(--lp-transition);
}
#quick-search #q::placeholder { color: rgba(255,255,255,.45); }
#quick-search #q:focus {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.55);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.12);
}
#quick-search a { color: rgba(255,255,255,.9); }

/* Project jump dropdown */
#project-jump .drdn-trigger {
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--lp-radius);
  padding: 3px 10px;
  transition: background var(--lp-transition);
}
#project-jump .drdn-trigger:hover { background: rgba(255,255,255,.12); }

/* ============================================================
   Main Menu (project nav tabs)
   ============================================================ */
#main-menu { background-image: none; }

#main-menu li a {
  color: rgba(255,255,255,.72);
  border-radius: 4px 4px 0 0;
  transition: color var(--lp-transition), background var(--lp-transition);
}
#main-menu li a:hover {
  background: rgba(255,255,255,.14);
  color: #fff;
}
#main-menu li a.selected,
#main-menu li a.selected:hover {
  background: var(--lp-surface);
  color: var(--lp-navy);
  font-weight: 700;
}
#main-menu li a.new-object {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
}

/* ============================================================
   Content Area
   ============================================================ */
#content {
  background: var(--lp-card);
}

/* ============================================================
   Sidebar
   ============================================================ */
#sidebar {
  background: var(--lp-surface);
  border-left: 1px solid var(--lp-border);
}

#sidebar h3 {
  color: var(--lp-text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

#sidebar ul li a, #sidebar ul li a:link, #sidebar ul li a:visited {
  color: var(--lp-text-sub);
  border-radius: var(--lp-radius);
  padding: 4px 8px;
  display: block;
  transition: background var(--lp-transition), color var(--lp-transition);
}
#sidebar ul li a:hover {
  background: var(--lp-primary-light);
  color: var(--lp-primary);
  text-decoration: none;
}
#sidebar ul li.selected > a,
#sidebar ul li.selected > a:link,
#sidebar ul li.selected > a:visited,
#sidebar a.selected {
  background: var(--lp-primary-light);
  color: var(--lp-primary);
  font-weight: 700;
}

/* ============================================================
   Headings
   ============================================================ */
#content h2, #content h3 { color: var(--lp-text); }

#content h2 {
  border-bottom: 2px solid var(--lp-primary);
  padding-bottom: 8px;
  font-weight: 700;
}

#content h3 {
  color: var(--lp-text-sub);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ============================================================
   Buttons — modern flat + shadow lift
   ============================================================ */
input[type=submit],
input[type=button] {
  background: var(--lp-primary);
  background-image: none;
  border: none;
  color: #fff;
  border-radius: var(--lp-radius);
  font-family: var(--lp-font);
  font-weight: 700;
  cursor: pointer;
  padding: 6px 18px;
  transition: background var(--lp-transition), box-shadow var(--lp-transition);
  box-shadow: 0 1px 3px rgba(37,99,235,.35);
  letter-spacing: .01em;
}
input[type=submit]:hover,
input[type=button]:hover {
  background: var(--lp-primary-dark);
  box-shadow: 0 4px 10px rgba(37,99,235,.35);
}

a.button, .button {
  background: var(--lp-primary);
  background-image: none;
  border: none;
  border-radius: var(--lp-radius);
  color: #fff !important;
  font-weight: 700;
  padding: 6px 18px;
  transition: background var(--lp-transition), box-shadow var(--lp-transition);
  box-shadow: 0 1px 3px rgba(37,99,235,.35);
  letter-spacing: .01em;
}
a.button:hover, .button:hover {
  background: var(--lp-primary-dark);
  box-shadow: 0 4px 10px rgba(37,99,235,.35);
  text-decoration: none;
}

/* Contextual action links (Edit / Delete など) */
.contextual a, .contextual a:link, .contextual a:visited { color: var(--lp-primary); }
.contextual a:hover { color: var(--lp-primary-dark); }

/* ============================================================
   SVG Icons
   ============================================================ */
svg.icon-svg { width: 1rem; height: 1rem; }
svg.s20 { width: 1.25rem;  height: 1.25rem; }
svg.s18 { width: 1.125rem; height: 1.125rem; }
svg.s16 { width: 1rem;     height: 1rem; }
svg.s14 { width: 0.875rem; height: 0.875rem; }
svg.s12 { width: 0.75rem;  height: 0.75rem; }

a.icon .icon-svg,
a.icon-only .icon-svg,
span.icon-actions .icon-svg { stroke: var(--lp-primary); }

a.icon:hover .icon-svg,
a.icon-only:hover .icon-svg,
span.icon-actions:hover .icon-svg { stroke: var(--lp-primary-dark); }

/* ============================================================
   Forms — clean focus ring
   ============================================================ */
input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=url],
select,
textarea {
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius);
  transition: border-color var(--lp-transition), box-shadow var(--lp-transition);
  background: var(--lp-card);
  color: var(--lp-text);
}

input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=url]:focus,
select:focus,
textarea:focus {
  border-color: var(--lp-primary);
  box-shadow: 0 0 0 3px var(--lp-primary-ring);
  outline: none;
}

/* ============================================================
   Tables — clean, modern
   ============================================================ */
table.list thead th {
  background: var(--lp-surface);
  background-image: none;
  border-bottom: 2px solid var(--lp-border);
  color: var(--lp-text-sub);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

table.list tbody tr.odd  { background: var(--lp-card); }
table.list tbody tr.even { background: var(--lp-surface); }
table.list tbody tr:not(.context-menu-selection):hover td,
table.list tbody tr.odd:not(.context-menu-selection):hover,
table.list tbody tr.even:not(.context-menu-selection):hover { background: var(--lp-primary-light); }

/* ============================================================
   Flash / Notice — accent-left-border style
   ============================================================ */
.flash.notice {
  background: var(--lp-success-bg);
  color: #065F46;
  border-color: var(--lp-success-border);
  border-left: 4px solid var(--lp-success);
  border-radius: var(--lp-radius);
}
.flash.warning {
  background: var(--lp-warning-bg);
  color: #92400E;
  border-color: var(--lp-warning-border);
  border-left: 4px solid var(--lp-warning);
  border-radius: var(--lp-radius);
}
.flash.error {
  background: var(--lp-danger-bg);
  color: #991B1B;
  border-color: var(--lp-danger-border);
  border-left: 4px solid var(--lp-danger);
  border-radius: var(--lp-radius);
}

/* ============================================================
   No data
   ============================================================ */
.nodata {
  background: var(--lp-surface);
  border-color: var(--lp-border);
  color: var(--lp-text-muted);
}

/* ============================================================
   Tabs
   ============================================================ */
div.tabs ul li a:hover { color: var(--lp-primary); }
div.tabs ul li.selected a {
  color: var(--lp-primary);
  border-bottom-color: var(--lp-primary);
  font-weight: 700;
}

/* ============================================================
   Pagination
   ============================================================ */
.pagination a:hover {
  color: var(--lp-primary);
  border-color: var(--lp-primary);
}
.pagination span.current {
  background: var(--lp-primary);
  border-color: var(--lp-primary);
  border-radius: var(--lp-radius);
  color: #fff;
  font-weight: 700;
}

/* ============================================================
   Progress bars
   ============================================================ */
.progress span { background: var(--lp-primary); }

/* ============================================================
   Activity feed
   ============================================================ */
#activity dd { transition: background var(--lp-transition); }
#activity dd:hover { background: var(--lp-primary-light); }

/* ============================================================
   Issue body
   ============================================================ */
div.issue {
  background: var(--lp-primary-light);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow-sm);
}

/* ============================================================
   Wiki
   ============================================================ */
.wiki table th { background: var(--lp-surface); }
.wiki pre {
  background: #F8FAFC;
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius);
  font-size: 0.875em;
  padding: 1em;
  overflow-x: auto;
}
.wiki code {
  background: #F8FAFC;
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius);
  font-size: 0.875em;
  padding: .15em .35em;
}
.wiki pre code {
  background: none;
  border: none;
  border-radius: 0;
  font-size: inherit;
  padding: 0;
}
.wiki blockquote {
  border-left: 4px solid var(--lp-primary-muted);
  color: var(--lp-text-sub);
  padding-left: 1rem;
}

/* ============================================================
   Dropdowns
   ============================================================ */
.drdn-content {
  border-color: var(--lp-border);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow-lg);
}

/* ============================================================
   Boxes / Panels
   ============================================================ */
.box {
  border-color: var(--lp-border);
  border-radius: var(--lp-radius);
}

/* ============================================================
   Login form — override Redmine's yellow (#FFEBC1 bg, #FDBF3B border)
   ============================================================ */
#login-form {
  background: var(--lp-card);
  border: 1px solid var(--lp-border);
  box-shadow: var(--lp-shadow-md);
  border-radius: var(--lp-radius-lg);
}

/* ============================================================
   My Page widgets
   ============================================================ */
.mypage-box {
  border-color: var(--lp-border);
  border-radius: var(--lp-radius-lg);
  box-shadow: var(--lp-shadow);
}
.mypage-box h3 {
  background: var(--lp-surface);
  border-bottom: 2px solid var(--lp-primary);
  color: var(--lp-text);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ============================================================
   Project list
   ============================================================ */
ul.projects li.root { border-radius: var(--lp-radius); }
ul.projects li.root:hover { border-color: var(--lp-primary); }
ul.projects a.project:hover { color: var(--lp-primary); }

/* ============================================================
   Admin menu
   ============================================================ */
#admin-menu a, #admin-menu a:link, #admin-menu a:visited { color: var(--lp-text-sub); }
#admin-menu a:hover { color: var(--lp-primary); }

/* ============================================================
   Sidebar switch button
   ============================================================ */
#sidebar-switch-button {
  border-color: var(--lp-border);
  border-radius: var(--lp-radius);
}
#sidebar-switch-button:hover { background: var(--lp-primary-light); }

/* ============================================================
   Footer
   ============================================================ */
#footer {
  background: var(--lp-surface);
  border-top: 1px solid var(--lp-border);
  color: var(--lp-text-muted);
  font-size: 0.8rem;
}