/*
   Phone layout for the members site.
   Loaded with media="screen and (max-width: 760px)", so desktop and tablet screens never see these rules.
   public/js/mobile.js adds the class "m" to <html> on the same screens and rebuilds the wide tables.
*/

/* ---- page frame */
html.m body { font-size: 16px; text-align: left; background: #ddd; }
html.m div#page { width: 100%; border: 0; }
html.m div#header { margin: 0; padding: 6px 10px; }
html.m div#branding { float: none; width: auto; padding: 4px 0; }
html.m div#branding img, html.m div#branding svg.ortho-logo { width: 70%; max-width: 70%; height: auto; }
html.m div#header hr { display: none; }
html.m div#content { width: auto; margin: 0; padding: 0 10px 16px; display: flex; flex-direction: column; }
html.m div#main { order: 2; min-width: 0; overflow-x: auto; }
html.m div#footer p { padding: 10px; }

/* ---- menu: a button that opens a list */
html.m div#nav { order: 1; position: static; font-size: 1rem; margin: 8px 0 4px; }
html.m div#nav div.wrapper { position: static; }
html.m div#nav h2.accessibility { display: none; }
html.m div#nav hr { display: none; }
html.m button.m-menu { display: block; width: 100%; padding: 12px 14px; font-size: 1.05rem; font-weight: bold; text-align: left;
                       background: #333; color: #fff; border: 0; border-radius: 8px; }
html.m div#nav ul { display: none; margin-top: 6px; border-radius: 8px; overflow: hidden; border: 1px solid #aaa; }
html.m div#nav.open ul { display: block; }
html.m div#nav li { float: none; display: block; border-right: 0; border-bottom: 1px solid #bbb; }
html.m div#nav li:last-child { border-bottom: 0; }
html.m div#nav a, html.m div#nav a:link, html.m div#nav a:visited { padding: 14px 16px; }

/* ---- form controls big enough for a thumb (16px stops iPhones zooming in) */
html.m input[type=text], html.m input[type=password], html.m input[type=number], html.m select, html.m textarea {
    font-size: 16px; min-height: 40px; box-sizing: border-box; }
html.m input[type=submit], html.m input[type=button], html.m button { font-size: 16px; min-height: 42px; padding: 8px 14px; margin: 4px 4px 4px 0; }
html.m input[type=radio], html.m input[type=checkbox] { width: 22px; height: 22px; vertical-align: middle; }

/* ---- search page */
html.m div.typebox { display: inline-block !important; margin: 4px 6px 4px 0 !important; padding: 10px 12px !important; border-radius: 8px; }
html.m fieldset.searchgroup { position: static !important; left: 0 !important; width: auto !important; margin: 10px 0; padding: 10px; }
html.m fieldset.searchgroup input.searchinput { width: 100%; margin: 4px 0; }

/* ---- search results: one card per car */
html.m table.m-cards, html.m table.m-cards tbody, html.m table.m-cards tr, html.m table.m-cards td { display: block; width: auto; }
html.m table.m-cards tr.m-head { display: none; }
html.m table.m-cards tr { background: #fff; border: 1px solid #bbb; border-radius: 10px; margin: 0 0 10px; padding: 8px 12px; cursor: pointer; }
html.m table.m-cards td { border: 0 !important; padding: 3px 0 !important; font-size: 0.95rem !important; background: none !important; }
html.m table.m-cards td::before { content: attr(data-label); display: inline-block; min-width: 7.5em; color: #666; font-size: 0.8rem; }
html.m table.m-cards td.m-first { font-size: 1.3rem !important; font-weight: bold; }
html.m table.m-cards td.m-first::before { display: none; }
html.m table.m-cards td.m-first a { font-size: 1.3rem; }
html.m table.m-cards td.m-blank { display: none; }

/* ---- vehicle page: top block (stock #, origin, buttons) stacks */
html.m form[name=vehicle] > div:first-of-type { height: auto !important; margin: 0 !important; }
html.m form[name=vehicle] > div:first-of-type table, html.m form[name=vehicle] > div:first-of-type tbody,
html.m form[name=vehicle] > div:first-of-type tr, html.m form[name=vehicle] > div:first-of-type td { display: block; width: auto !important; text-align: left !important; }
html.m form[name=vehicle] > div:first-of-type td { padding: 4px 0 !important; }
html.m div.banner { display: block; width: auto; margin: 6px 0; padding: 0; font-size: 1.2rem; }
html.m input.banner { font-size: 1.3rem; width: 7em; }
html.m form[name=vehicle] > div[style*="clear:both"] { margin-top: 10px !important; }

/* ---- vehicle page: the six-across grid becomes label / value fields (built by mobile.js) */
html.m div.m-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 12px; }
html.m div.m-field { border: 1px solid #999; border-radius: 8px; overflow: hidden; min-width: 0; background: #fff; }
html.m div.m-field.m-wide { grid-column: 1 / -1; }
html.m div.m-field > .m-label { background: #555; color: #fff; font-size: 0.78rem; font-weight: bold; padding: 4px 8px; }
html.m div.m-field > .m-label small { color: #9ff; }
html.m div.m-field > .m-label a { color: #fff; text-decoration: underline; padding: 0 4px; }
html.m div.m-field > .m-value { padding: 6px 8px; text-transform: uppercase; word-break: break-word; min-height: 1.6em; }
html.m div.m-field > .m-value input.inrow { width: 100% !important; border: 1px solid #aaa; border-radius: 4px; padding: 6px; letter-spacing: normal !important; font-size: 16px !important; }
html.m div.m-field > .m-value input[type=text] { width: 100% !important; max-width: 100%; }
html.m div.m-field > .m-value span { letter-spacing: normal !important; margin-left: 0 !important; }
html.m div.m-field > .m-value table, html.m div.m-field > .m-value tbody, html.m div.m-field > .m-value tr, html.m div.m-field > .m-value td { display: block; width: auto !important; text-align: left !important; }
html.m div.m-field > .m-value input.city, html.m div.m-field > .m-value input.state { width: 100% !important; margin: 3px 0; }
html.m div.m-field > .m-value input[type=button] { display: inline-block; width: calc(50% - 6px); margin: 6px 6px 0 0 !important; }
html.m div.m-field > .m-value div[style*="letter-spacing"] { letter-spacing: normal !important; font-size: 0.85rem !important; display: block !important; }
html.m div.m-field > .m-value div[style*="height:180px"] { height: auto !important; max-height: 50vh; }

/* ---- Reclaim wizard (opens in its own tab on a phone) */
html.m table.statbar { width: 100% !important; margin: 0 0 8px !important; }
html.m table.statbar td { font-size: 0.75rem; padding: 6px 2px; }
html.m form[name=wiz1] div[style*="margin-left"] { margin-left: 0 !important; width: auto !important; max-width: none !important; }
html.m form[name=wiz1] fieldset { width: auto !important; margin: 8px 0 !important; }
html.m form[name=wiz1] fieldset:not(#insurance_forms) { display: block !important; }   /* insurance_forms shows/hides itself */
html.m form[name=wiz1] input[type=checkbox], html.m form[name=wiz1] input[type=radio] { margin: 8px 6px 8px 0; }
html.m form[name=wiz1] table { width: 100% !important; }
html.m form[name=wiz1] td[contenteditable] { float: none !important; width: auto !important; }
html.m #err_text { margin: 8px 0 !important; }

/* ---- Enter New start screen, reports, user admin */
html.m fieldset.buttonfield { width: auto !important; padding: 10px !important; }
html.m fieldset.buttonfield input[name=vin] { width: 100%; }
html.m div.block { width: auto !important; padding: 8px !important; }
html.m div#main table { font-size: 0.9rem; }

/* ---- Status Details page (opens in its own tab on a phone) */
html.m form[name=status_detail] table { margin: 10px 0 !important; width: 100%; }
html.m form[name=status_detail] td, html.m form[name=status_detail] th { padding: 8px 6px !important; font-size: 0.95rem; }
html.m form[name=status_detail] input[type=text] { width: 100%; }
html.m form[name=status_detail] td span a { display: inline-block; font-size: 0.95rem !important; padding: 8px 4px; }
html.m div.messagebar { width: auto !important; }