/* Port additions: only what the legacy CSS delegated to its JS (Sirius.js) or
   what the Laravel port needs. Everything visual comes from default.css + color.css. */

/* No-sidebar pages: legacy fixed 1200px centered column, fluid below 1200px. */
.page-wrap { width: 1200px; max-width: 100%; margin: 0 auto; padding-top: 15px; }

/* Palette as CSS variables (2026-10-28 modernization): default.css and color.css
   reference these instead of repeating hex values, so the whole app's colors
   can be adjusted in this one place. Values are the legacy colors, unchanged. */
:root {
    --c-text: #595f5b;
    --c-gray: #939c96;
    --c-panel: #eeeeee;
    --c-white: #ffffff;
    --c-accent: #50c878;
    --c-red: #c85757;
    --c-blue: #5794c8;
    --c-line: #cccccc;
    --c-line-soft: #dddddd;
}

/* Legacy JS toggled .mouseover/.focus classes on sheet/input fields; :hover/:focus do the same. */
Table.SheetData td input:hover, Table.SheetData td textarea:hover,
Table.InputData td input:hover { border: 1px solid #939c96; background-color: #ffffff; color: #595f5b; }
Table.SheetData td input:focus, Table.SheetData td textarea:focus,
Table.InputData td input:focus { border: 1px solid #939c96; background-color: #eeeeee; color: #595f5b; outline: none; }
Table.SheetData td select:focus, Table.InputData td select:focus { outline: none; }

/* Project detail header (Toshi's layout, 2026-10-27): the project name is a
   large heading-style input above the SheetData table, and the Description
   textarea is taller than the legacy 5em. */
input.project-title {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ffffff;
    background-color: #ffffff;
    color: #595f5b;
    font-family: inherit;
    font-size: 24px;
    font-weight: 700;
    padding: 4px 6px;
    margin: 0 0 12px -7px;
}
input.project-title:hover { border: 1px solid #939c96; }
input.project-title:focus { border: 1px solid #939c96; background-color: #eeeeee; outline: none; }
input.project-title.new { border: 1px solid #939c96; }

/* The legacy pages render in almost-standards mode (XHTML 1.0 Transitional),
   where the inline logo image gets no baseline gap. In full standards mode the
   gap makes the floated #logo box a few px taller than #header, and the float
   intrudes into the #gn band, pushing the floated #gnList right by the logo's
   width. display:block removes the gap and restores the legacy geometry. */
#header #logo img { display: block; }

/* SheetData date inputs are text fields in the port (legacy used a calendar popup). */
Table.SheetData td input.datefield { width: 10em; }

/* Logout is a POST form in the port; legacy was a JS link. */
#user_info form { display: inline; }
button.logout-link { background: none; border: none; color: #595f5b; cursor: pointer; font: inherit; padding: 0; }
button.logout-link:hover { text-decoration: underline; color: #939c96; }
#user_info button.logout { background: none; border: none; color: #595f5b; cursor: pointer; font: inherit; padding: 0; border-radius: 0; }
#user_info button.logout:hover { text-decoration: underline; color: #939c96; background: none; }

/* Session flash, placed where the legacy #SiriusResult appeared. */
#SiriusResult { margin-top: 1em; }
#SiriusResult .ResultOk { color: #3aa75d; font-weight: bold; }
#SiriusResult .ResultError { color: #c33636; font-weight: bold; }

/* Validation errors on guest pages. */
#lf .errors { color: #c33636; font-size: 12px; text-align: left; }

/* The legacy add-row form is revealed by the Add New button (JS in the original). */
.addrow { display: none; }
.addrow.open { display: block; }

/* Board list wrapper used by the legacy list view. */
#BoardList:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

/* Retainer series cards (markup/styles lifted from the legacy list view). */
.RetainerCard { width: 420px; }
.RetainerCard h3 { margin-bottom: 2px; }
.RetainerCard .Client { margin-bottom: 6px; }
.RetainerCard table.rmonths { width: 100%; border-collapse: collapse; margin-top: 4px; }
.RetainerCard table.rmonths th, .RetainerCard table.rmonths td { font-size: 11px; padding: 3px 4px; border-bottom: 1px solid #eeeeee; }
.RetainerCard table.rmonths th { color: #939c96; font-weight: normal; text-align: left; border-bottom: 1px solid #cccccc; }
.RetainerCard table.rmonths td.r, .RetainerCard table.rmonths th.r { text-align: right; white-space: nowrap; }
.RetainerCard table.rmonths td.c { text-align: center; width: 18px; }
.RetainerCard table.rmonths tr.rtotal td { border-top: 1px solid #939c96; border-bottom: none; font-weight: bold; color: #595f5b; }
.RetainerCard table.rmonths a { color: #0d5897; }

/* Margin Calculator summary table (inline <style> in the legacy project page). */
.InputData TD.Summary, .InputData TH.Summary { width: 1px; white-space: nowrap; text-align: center; }
.InputData TD.Summary { font-weight: bold; }
.InputData TD.dashed, .InputData TH.dashed { border-left: 1px dashed #939c96; }
.InputData TD.solid, .InputData TH.solid { border-left: 1px solid #939c96; }
#ProjectSummaryTable.summary_na { opacity: .35; }
#ProjectSummaryTable input.ratefield { border: 1px solid #939c96; text-align: center; color: #939c96; background-color: #eeeeee; width: 5em; }

/* File list on the project page. */
.FileList .deletebtn { font-size: 10px; }

/* Two-factor / profile helpers in legacy vocabulary. */
.qrbox { background: #ffffff; padding: 1em; display: inline-block; border: 1px solid #dddddd; border-radius: .5em; }
code.secret { font-size: 16px; letter-spacing: .08em; background: #eeeeee; padding: .3em .6em; }

/* Responsive (2026-10-28 modernization): below 900px the sidebar becomes a
   horizontal strip above the content, the header/nav wrap, and wide tables
   scroll horizontally inside their .grid-scroll box instead of breaking the
   page layout. Desktop rendering above the breakpoint is unchanged. */
@media (max-width: 900px) {
    body.has-ln {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "header" "gn" "ln" "content";
        /* The desktop sidebar stripe is the body background (a 151px #eeeeee
           band); with the sidebar gone it would cut a seam through the
           content, so on mobile the band moves onto the sidebar strip. */
        background-image: none;
    }
    #ln { padding-top: 4px; background: var(--c-panel); }
    #header #logo, #header #user_info { min-width: 0; }
    #header #user_info { max-width: 100%; box-sizing: border-box; }
    #ln h1 { display: inline-block; margin: 0 8px 4px 0; vertical-align: middle; }
    #ln .MenuItem { display: inline-block; margin-right: 6px; }
    #ln fieldset { display: inline-block; vertical-align: top; }
    #ln .add { display: inline-block; }
    #header { height: auto; min-height: 75px; flex-wrap: wrap; }
    #header #user_info { padding-top: 8px; }
    #gn { height: auto; min-height: 36px; flex-wrap: wrap; }
    #gn #gnList { min-width: 0; }
    .grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .grid-scroll > table { min-width: 780px; }
    .page-wrap { padding-left: 10px; padding-right: 10px; box-sizing: border-box; }
    canvas { max-width: 100%; height: auto; }
}
@media (max-width: 620px) {
    #lf { width: 94vw; }
    #lf th { width: 35%; }
    #lf td { width: 65%; }
}