/*
 * Planning Shepherd theme — faithful port of the legacy visual identity.
 *
 * Sources (ps-app-ecs/src/resources/stylesheets/):
 *   site.css 14.7.1, defaults.css 12.10.2, dropdown_menu.css 12.10.8,
 *   plus the lightswitch rules from magic.13.5.17.css.
 * Rewritten as clean modern CSS (no vendor-prefix gradients, no IE filters,
 * no float-clearing hacks) but the RENDERED look matches legacy: same
 * palette, logo placement, nav bar, table borders/stripes, form rhythm.
 *
 * Image assets in /images/ are copied verbatim from
 * ps-app-ecs/src/resources/images/ (see public/images provenance note).
 */

/* ---------------------------------------------------------------- base */

* { box-sizing: content-box; } /* legacy default; widths were tuned for it */

body {
  background-color: #eee;
  color: #404041;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  margin: 0;
}

h1, h2, h3, h4, h5, p { margin: 0 0 10px 0; }
img { border: 0; }

a { color: #1a75af; text-decoration: none; }
a:hover { color: #24a6de; }

h1 {
  background-color: #1a75af;
  border: 1px solid #1a75af;
  border-radius: 5px;
  box-shadow: 0 1px 2px #333;
  color: #f5f5f5;
  font-size: 18px;
  font-weight: normal;
  padding: 5px 5px 5px 10px;
  text-shadow: 1px 1px 0 #333;
}
h1 a { color: #c0c0c0; }
h1 a:hover { color: #fff; }

h2 {
  background-color: #d4d4d4;
  border: 1px solid #d4d4d4;
  border-radius: 3px;
  box-shadow: 0 1px 2px #858585;
  color: #404041;
  font-size: 16px;
  font-weight: normal;
  padding: 5px 5px 5px 10px;
  text-shadow: 0 1px 0 #eee;
}
h2 a { color: #404041; }
h2 a:hover { color: #1a75af; }
h3 { font-size: 14px; }
h4 { font-size: 12px; }

/* ------------------------------------------------------- page shell */

#section_wrapper {
  background-color: #fff;
  border-bottom: 1px solid #c0c0c0;
  border-left: 1px solid #c0c0c0;
  border-right: 1px solid #c0c0c0;
  border-bottom-right-radius: 7px;
  border-bottom-left-radius: 7px;
  box-shadow: 0 0 5px #949494;
  margin: 0 auto 20px auto;
  padding: 10px 20px;
  width: min(93%, 1400px);
}

main { line-height: 18px; margin: 5px 0; }

#site-footer {
  color: #666;
  font-size: 10px;
  padding-top: 10px;
  text-align: center;
}

/* ----------------------------------------------------------- header */

#site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 5px;
}

#web_head { margin: 0; padding: 0; order: 1; }
#web_head img { max-width: 100%; height: auto; }

/* Default nav mode: the "Welcome … · Logout" strip, top right (legacy
 * header float_right). */
#site-nav {
  order: 2;
  margin-left: auto;
  margin-right: 20px;
  text-align: right;
}
#site-nav .welcome { color: #404041; }
#site-nav > a[href="/logout"]::before { content: "· "; color: #404041; }

/* Bar mode: when the nav region carries page navigation (a current-page
 * tab, or the FI page's #nav_main block) it renders as the legacy dark
 * brown menu bar below the logo. */
#site-nav:has(> a[aria-current="page"]),
#site-nav:has(#nav_main) {
  order: 3;
  flex-basis: 100%;
  margin: 0 0 20px 0;
  text-align: left;
}

#site-nav:has(> a[aria-current="page"]),
#nav_main {
  background-color: #2c190d;
  border: 1px solid #404041;
  border-radius: 5px;
  box-shadow: 0 1px 2px #949494;
  color: #fff;
}
#site-nav:has(#nav_main) {
  background: none;
  border: 0;
  box-shadow: none;
}
#nav_main { margin: 0 0 20px 0; }

/* Tab links (both the bare-anchor bar and the dropdown_menu ul). */
#site-nav:has(> a[aria-current="page"]) > a,
.dropdown_menu a {
  color: #e8e5e5;
  display: inline-block;
  font-weight: bold;
  margin: 0;
  padding: 10px 15px;
  text-decoration: none;
}
#site-nav > a[aria-current="page"],
#site-nav:has(> a[aria-current="page"]) > a:hover,
.dropdown_menu a:hover,
.dropdown_menu a.dropdown_menu_current {
  background-color: #0096d8;
  color: #fff;
}
#site-nav > a[aria-current="page"] { border-radius: 5px 0 0 5px; }
#site-nav > a[aria-current="page"]::before { content: none; }

.dropdown_menu {
  margin: 0;
  padding: 0;
  min-height: 20px;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
.dropdown_menu li { background-color: #2c190d; margin: 0; padding: 0; }
.dropdown_menu li:first-child a { border-radius: 5px 0 0 5px; }
.dropdown_menu a { display: block; }

/* ----------------------------------------------------------- tables */

main table {
  background: inherit;
  border: 0;
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 10px;
}
main table td, main table th {
  border-bottom: 1px solid #d4d4d4;
  border-left: 1px dotted #d4d4d4;
  border-right: 1px dotted #d4d4d4;
  border-top: 1px solid #d4d4d4;
  padding: 5px;
  text-align: left;
  vertical-align: top;
}
main table th {
  color: #1a75af;
  font-size: 14px;
  font-weight: bold;
}
main table tbody tr:hover { background: #fffde3 !important; }

/* Legacy alternating bg_silver rows. */
main table tbody tr:nth-child(odd) { background: #f5f5f5; }

/* Bold sub-header rows (FI section tables). */
.general_tr_sub_header td { font-weight: bold; }
.bg_silver { background: #f5f5f5 !important; }

main table td strong { font-size: 14px; }

/* Row action affordances render as the legacy gray pill buttons. */
/* Block-level so action pills drop onto their own line beneath the bold
 * first-cell text (legacy puts Edit/FI/Expressions under the date). */
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 5px; }
.row-actions form { display: inline; margin: 0; }

/* ---------------------------------------------------------- buttons */

.bg_colors,
button,
input[type="submit"],
input[type="button"],
main p > a[href$="/add"],
a#export_Excel_add_link,
.notes-overview .toolbar a,
.row-actions a,
.row-actions button,
.client-row td:first-child a,
.section_eplan p.align_right > a {
  background: linear-gradient(#eee, #d4d4d4);
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  color: #262626;
  cursor: pointer;
  display: inline-block;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  padding: 2px 7px;
  text-decoration: none;
  text-shadow: 0 -1px 0 #f5f5f5;
  vertical-align: bottom;
}
.bg_colors:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.row-actions a:hover,
.row-actions button:hover {
  background: #e1e1e1;
  color: #262626;
}

/* Primary (blue) actions — submits and add/export/toolbar links. */
.bg_colors_primary,
input.bg_colors_primary,
button[type="submit"],
input[type="submit"],
main p > a[href$="/add"],
a#export_Excel_add_link,
.notes-overview .toolbar a,
.section_eplan p.align_right > a {
  background: linear-gradient(#009cdc, #1a75af);
  border-color: #1a75af;
  color: #fff;
  text-shadow: 0 -1px 0 #666;
}
.bg_colors_primary:hover,
input.bg_colors_primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
main p > a[href$="/add"]:hover,
a#export_Excel_add_link:hover,
.notes-overview .toolbar a:hover,
.section_eplan p.align_right > a:hover {
  background: #1a75af;
  color: #fff;
}

.bg_colors_default, input.bg_colors_default { background: linear-gradient(#eee, #d4d4d4); border-color: #d4d4d4; color: #262626; text-shadow: 0 -1px 0 #f5f5f5; }
.bg_colors_default:hover, input.bg_colors_default:hover { background: #e1e1e1; color: #262626; }

/* Delete keeps the gray look (legacy row buttons were all default-gray). */
.row-actions button[type="submit"] {
  background: linear-gradient(#eee, #d4d4d4);
  border-color: #d4d4d4;
  color: #262626;
  text-shadow: 0 -1px 0 #f5f5f5;
}
.row-actions button[type="submit"]:hover { background: #e1e1e1; color: #262626; }

/* ------------------------------------------------------------ forms */

form { display: block; margin: 0; padding: 0; }

fieldset {
  border: 1px solid #e1e1e1;
  display: block;
  margin: 10px auto;
  padding: 5px 5px 10px 5px;
}
legend { color: #000; font-size: 14px; font-weight: bold; }

input[type="text"],
input[type="password"],
textarea,
select {
  background-color: #fff;
  border: 1px solid #dedede;
  border-radius: 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 16px;
  padding: 4px;
  vertical-align: baseline;
}
input[type="text"]:hover, input[type="text"]:focus,
input[type="password"]:hover, input[type="password"]:focus,
textarea:hover, textarea:focus,
select:hover, select:focus {
  background-color: #fffde3;
  border-color: #006ad1;
  outline: none;
}
input[readonly], input[disabled] {
  background-color: #eee !important;
  cursor: not-allowed;
}

/* Legacy form_line rows: gray rounded stripe, bold right-aligned label in
 * the left 25%, control on the right. The new app wraps controls in their
 * <label>, so the label text becomes an anonymous grid item. */
main form > label {
  display: grid;
  grid-template-columns: 25% 1fr;
  gap: 10px;
  align-items: center;
  background-color: #f1f1f1;
  border-radius: 5px;
  font-weight: bold;
  margin: 0 0 5px 0;
  padding: 8px;
  text-align: right;
}
main form > label:hover { background-color: #f5f5f5; }
main form > label input,
main form > label select,
main form > label textarea {
  font-weight: normal;
  justify-self: start;
  text-align: left;
  width: min(420px, 95%);
}
main form > label textarea { min-height: 100px; }
main form > label input[type="radio"],
main form > label input[type="checkbox"] { width: auto; }

/* Radio/checkbox option labels inside fieldsets stay plain. */
fieldset label {
  display: inline-block;
  font-weight: normal;
  margin: 2px 0;
  text-align: left;
}

main form > button[type="submit"] { margin: 5px 0 10px 0; }

/* Notes filter — render as the legacy gray toolbar strip with inline
 * fields rather than stacked form lines. */
form#notes-filter {
  background-color: #f5f5f5;
  border: 1px solid #dedede;
  border-radius: 3px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 6px 8px;
}
form#notes-filter label {
  background: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: bold;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
form#notes-filter input { width: 110px; margin-left: 3px; }
form#notes-filter button[type="submit"] { margin: 0; }

.notes-overview .toolbar { text-align: right; }

/* View page definition list (note view). */
main dl {
  background-color: #f1f1f1;
  border-radius: 5px;
  margin: 0 0 10px 0;
  padding: 8px;
}
main dl dt { float: left; clear: left; width: 25%; font-weight: bold; text-align: right; }
main dl dd { margin: 0 0 8px calc(25% + 10px); min-height: 15px; }

/* Login pages: legacy renders the "Sign In" heading as the gray centered
 * bar and a default-gray centered submit (site login, Bourbon element 344). */
main:has(form[action$="/login/"]) > h1 {
  background-color: #d4d4d4;
  border: 1px solid #d4d4d4;
  box-shadow: 0 1px 2px #858585;
  color: #404041;
  font-size: 18px;
  text-align: center;
  text-shadow: 0 1px 0 #eee;
}
form[action$="/login/"] { text-align: center; }
form[action$="/login/"] > label { text-align: right; }
form[action$="/login/"] input { width: min(420px, 95%); }
form[action$="/login/"] button[type="submit"] {
  background: linear-gradient(#eee, #d4d4d4);
  border-color: #d4d4d4;
  color: #262626;
  text-shadow: 0 -1px 0 #f5f5f5;
}
form[action$="/login/"] button[type="submit"]:hover { background: #e1e1e1; }

/* ---------------------------------------------------------- flashes */

p.flash {
  border: 1px solid;
  border-radius: 4px;
  margin: 8px auto;
  padding: 6px 10px;
  text-align: left;
}
p.flash-error {
  background: linear-gradient(#ec4848, #cd3e36);
  border-color: #cd3e36;
  color: #fff;
  text-shadow: 0 -1px 0 #666;
}
p.flash-success {
  background: linear-gradient(#56c25b, #4eab53);
  border-color: #4eab53;
  color: #fff;
  text-shadow: 0 -1px 0 #666;
}
p.flash-info {
  background: linear-gradient(#009cdc, #1a75af);
  border-color: #1a75af;
  color: #fff;
  text-shadow: 0 -1px 0 #666;
}

/* ------------------------------------------------- legacy utilities */
/* Classes the ported pages still emit (FI sections, calculators). */

.display_none { display: none !important; }
.align_left { text-align: left !important; }
.align_center { text-align: center !important; }
.align_right { text-align: right !important; }
.padding_10 { padding: 10px !important; }
.clear_both { clear: both; font-size: 0; height: 0; }

/* Calculator / legacy form-line layout (markup carries these classes). */
.form_line_field {
  background-color: #f1f1f1;
  border: 0;
  border-radius: 5px;
  clear: both;
  line-height: normal;
  margin: 0 0 5px 0 !important;
  min-height: 5px;
  padding: 5px !important;
}
.form_line_field:hover { background-color: #f5f5f5 !important; }
.form_line_left_field {
  float: left;
  font-weight: bold;
  margin-right: 10px !important;
  padding-top: 4px !important;
  text-align: right;
  width: 25%;
}
.form_line_right_field { float: left; width: 72%; }

.input_fld {
  background-color: #fff;
  border: 1px solid #dedede;
  border-radius: 2px;
  display: inline-block;
  font-size: 12px;
  line-height: 16px;
  padding: 4px;
  vertical-align: baseline;
  width: 90%;
}
.input_fld:hover, .input_fld:focus { background-color: #fffde3; border-color: #006ad1 !important; outline: none; }
.input_fld[readonly], .input_fld[disabled] { background-color: #eee !important; cursor: not-allowed; }
.input_text_small { width: auto; }

/* ------------------------------------------- financial information */

#section_content { line-height: 18px; margin: 5px 0; }

.section_eplan { padding: 0 10px 5px 10px; }
.section_eplan_table {
  background-color: #f9f9f9;
  border: 1px solid #d9d9d9;
  border-bottom-right-radius: 7px;
  border-bottom-left-radius: 7px;
  margin-bottom: 10px;
  padding: 10px;
}
.section_eplan_form { background-color: #fff; border: 1px solid #eee; padding: 5px 20px 0 20px; }

/* FI section headings: the bar lives on the link, uppercase, with the
 * lightswitch +/− icon. Icon state derives from the sibling container. */
#eplan_financial_information h1 {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  text-shadow: none;
}
#eplan_financial_information h1 a {
  background-color: #1a75af;
  background-image: url(/images/icon_lightswitch_none.png);
  background-repeat: no-repeat;
  background-position: 6px 6px;
  border: 1px solid #1a75af;
  border-radius: 5px;
  box-shadow: 0 1px 2px #333;
  color: #f5f5f5;
  display: block;
  padding: 5px 5px 5px 30px;
  text-shadow: 1px 1px 0 #333;
  text-transform: uppercase;
}
#eplan_financial_information h1 a:hover { background-color: #15699f; color: #fff; }
#eplan_financial_information h1:has(+ div:not(.display_none)) a {
  background-image: url(/images/icon_lightswitch_block.png);
}

/* Expand/Contract All carries the small toggle icon too. */
#lswitch_toggle_all {
  background: url(/images/icon_lightswitch_none.png) no-repeat 0 0;
  cursor: pointer;
  display: inline-block;
  padding-bottom: 1px;
  padding-left: 15px;
}

/* FI tables are inside .section_eplan_table on #f9f9f9 — keep legacy
 * coloring (no zebra stripes there; sub-header rows carry bg_silver). */
#eplan_financial_information table tbody tr:nth-child(odd) { background: inherit; }
#eplan_financial_information table td { font-size: 12px; }
#eplan_financial_information table td strong { font-size: 12px; }

/* The toolbar line above the sections (Expand/Contract + Export). */
#eplan_financial_information > p.align_left,
#eplan_financial_information p:has(> #export_Excel_add_link) { display: flow-root; }
a#export_Excel_add_link { float: right; }

/* Slide-out jump tabs at the right edge (legacy quick-jump family).
 * Legacy stack: calcs @30px, templates @65px, tutorials @100px,
 * notes/menu @135px. */
#eplan_quick_jump,
#eplan_calculator_jump,
#eplan_templates_jump,
#eplan_tutorials_jump,
#eplan_account_jump,
#eplan_notes_jump {
  background-color: #eee;
  border-bottom: 1px solid #78abcb;
  border-left: 1px solid #78abcb;
  border-top: 1px solid #78abcb;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  box-shadow: 1px 1px 3px #c0c0c0;
  height: 20px;
  line-height: 16px;
  right: -102px;
  overflow: hidden;
  padding: 5px 5px 0 5px;
  position: fixed;
  top: 135px;
  width: 140px;
  z-index: 100;
  transition: all 0.1s ease-in-out;
}
#eplan_calculator_jump { top: 30px; }
#eplan_templates_jump { top: 65px; }
#eplan_tutorials_jump { top: 100px; }
#eplan_account_jump { top: 135px; }
/* The notes jump stays expanded on the next app: its link is a real
 * navigation (clicked by users and the characterization suite), not a
 * hover-revealed darkroom trigger. */
#eplan_notes_jump { height: auto; min-height: 60px; right: 0; top: 200px; }
#eplan_quick_jump::before { content: "Menu"; display: block; font-size: 14px; margin-bottom: 10px; }
#eplan_quick_jump:hover,  #eplan_quick_jump:focus-within,
#eplan_calculator_jump:hover, #eplan_calculator_jump:focus-within,
#eplan_templates_jump:hover, #eplan_templates_jump:focus-within,
#eplan_tutorials_jump:hover, #eplan_tutorials_jump:focus-within,
#eplan_account_jump:hover, #eplan_account_jump:focus-within,
#eplan_notes_jump:hover, #eplan_notes_jump:focus-within {
  background: #fffde3;
  height: auto;
  min-height: 100px;
  padding: 5px;
  right: 0;
}
#eplan_quick_jump:hover, #eplan_quick_jump:focus-within { min-height: 250px; }
#eplan_quick_jump:hover::before { font-weight: bold; }
#eplan_calculator_jump h3,
#eplan_templates_jump h3,
#eplan_tutorials_jump h3,
#eplan_account_jump h3,
#eplan_notes_jump h3 { font-weight: normal; margin-bottom: 10px; }
#eplan_calculator_jump:hover h3,
#eplan_templates_jump:hover h3,
#eplan_tutorials_jump:hover h3,
#eplan_account_jump:hover h3,
#eplan_notes_jump:hover h3 { font-weight: bold; }
#eplan_quick_jump p,
#eplan_calculator_jump p,
#eplan_templates_jump p,
#eplan_tutorials_jump p,
#eplan_account_jump p,
#eplan_notes_jump p { margin: 0; padding: 0; }
#eplan_quick_jump p,
#eplan_calculator_jump p,
#eplan_templates_jump p,
#eplan_account_jump p,
#eplan_tutorials_jump p { visibility: hidden; }
#eplan_quick_jump:hover p, #eplan_quick_jump:focus-within p,
#eplan_calculator_jump:hover p, #eplan_calculator_jump:focus-within p,
#eplan_templates_jump:hover p, #eplan_templates_jump:focus-within p,
#eplan_account_jump:hover p, #eplan_account_jump:focus-within p,
#eplan_tutorials_jump:hover p, #eplan_tutorials_jump:focus-within p { visibility: visible; }
#eplan_quick_jump a,
#eplan_calculator_jump a,
#eplan_templates_jump a,
#eplan_tutorials_jump a,
#eplan_account_jump a,
#eplan_notes_jump a { display: block; margin: 2px; padding: 2px; }
#eplan_quick_jump a:hover, #eplan_quick_jump a:focus,
#eplan_calculator_jump a:hover, #eplan_calculator_jump a:focus,
#eplan_templates_jump a:hover, #eplan_templates_jump a:focus,
#eplan_tutorials_jump a:hover, #eplan_tutorials_jump a:focus,
#eplan_account_jump a:hover, #eplan_account_jump a:focus,
#eplan_notes_jump a:hover, #eplan_notes_jump a:focus { background-color: #1a75af; color: #fff; }

/* ------------------------------------------------- FI section tooltips */

/* Legacy EPlanFeature::GetToolTip renders a "what's this?" anchor next to a
 * section header with a hidden body span revealed on hover/focus. No JS
 * framework on the next app — pure CSS hover/focus reveal. */
.tool_tip { position: relative; display: inline-block; }
.tool_tip .tool_tip_link { color: #1a75af; white-space: nowrap; }
.tool_tip .eplan_tips {
  display: none;
  position: absolute;
  left: 0;
  top: 1.4em;
  z-index: 200;
  background: #fffde3;
  border: 1px solid #78abcb;
  border-radius: 4px;
  box-shadow: 1px 1px 3px #c0c0c0;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: normal;
  color: #404041;
  text-align: left;
  white-space: normal;
  line-height: 1.4;
}
.tool_tip:hover .eplan_tips,
.tool_tip:focus-within .eplan_tips { display: block; }
.eplan_tips.width_250 { width: 250px; }
.eplan_tips.width_500 { width: 500px; }
.eplan_tips.width_700 { width: 700px; }

/* ------------------------------------------------------- responsive */

/* Legacy has no responsive rules at all — a 768px tablet gets the desktop
 * two-column layout. Only collapse below 640px (true phone widths). */
@media (max-width: 640px) {
  #section_wrapper { width: auto; margin: 0 4px 20px 4px; padding: 10px; }
  main form > label { grid-template-columns: 1fr; text-align: left; }
  form[action$="/login/"] > label { text-align: left; }
  main dl dt { float: none; width: auto; text-align: left; }
  main dl dd { margin-left: 0; }
  .form_line_left_field, .form_line_right_field { float: none; width: auto; text-align: left; }
}