/* ============================================================================ LOX / OBOGS Tracker - stylesheet Layout is a CSS grid on : a dark navy rail down the left holding the nav, a light bar across the top for identity and counts, and the content in the remaining space. Below 900px the rail unfolds into a horizontal strip, because a fixed sidebar on a phone costs more width than it earns. Class and id names are load-bearing - app.js writes markup against them. Nothing here renames one. ========================================================================= */ :root{ /* ---- surface ---- */ --ink:#131923; --muted:#5c6a7d; --faint:#8592a3; --line:#e0e6ef; --line-soft:#eef2f7; --bg:#eef1f6; --card:#fff; /* ---- brand ---- */ --navy:#1f3864; --navy-deep:#152845; --navy-lift:#2b4d84; --navy-soft:#e8edf5; --accent:#2d6cb5; /* ---- status. These are load-bearing: the dots, pills and row tints all read off the same hues, and they are picked to stay distinguishable without colour. Change one and change its partners. ---- */ --red:#b3261e; --red-bg:#fdecea; --red-deep:#8c1d18; --amber:#8a5a00; --amber-bg:#fff4d6; --amber-mid:#c98a00; --green:#1c6b3c; --green-bg:#e6f4ea; --blue:#14567a; --blue-bg:#e2f0f7; --purple:#6b3fa0; --purple-bg:#f1eafb; /* ---- shape ---- */ --r-sm:7px; --r:10px; --r-lg:14px; --shadow-sm:0 1px 2px rgba(19,25,35,.06), 0 1px 3px rgba(19,25,35,.05); --shadow:0 2px 4px rgba(19,25,35,.05), 0 8px 20px rgba(19,25,35,.07); --shadow-lg:0 18px 50px rgba(19,25,35,.28); --rail:236px; } /* Every printout is landscape. These lists are far wider than they are tall and a portrait sheet cuts columns off the right-hand edge. Declared at the top level rather than inside the print block - that is where browsers honour it most reliably, and @page only ever applies to paper anyway. */ @page{ size: letter landscape; margin: 11mm; } *{box-sizing:border-box} body{ margin:0; background:var(--bg); color:var(--ink); min-height:100vh; font:16px/1.5 "Segoe UI",system-ui,-apple-system,Arial,sans-serif; -webkit-font-smoothing:antialiased; display:grid; grid-template-columns:var(--rail) minmax(0,1fr); grid-template-rows:auto 1fr; grid-template-areas:"nav header" "nav main"; } /* A direct child of with no grid area gets auto-placed into the first free cell - which is the nav rail. A section that lands there renders at 236px wide with its content crushed, and it looks like a styling problem rather than the markup mistake it is. This makes that failure benign. */ body > :not(nav):not(header):not(main):not(dialog):not(#loginWrap){grid-area:main} /* ---------------------------------------------------------------- header -- */ header{ grid-area:header; background:var(--card); border-bottom:1px solid var(--line); padding:13px 26px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; } header h1{ font-size:16px; margin:0; font-weight:650; letter-spacing:-.1px; color:var(--ink); } header .count{ margin-left:auto; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; text-align:right; line-height:1.4; } #signOut{white-space:nowrap} /* ------------------------------------------------------------------ rail -- */ nav{ grid-area:nav; background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%); display:flex; flex-direction:column; gap:2px; padding:0 12px 18px; border-right:1px solid var(--navy-deep); } .brand{ display:flex; align-items:center; gap:11px; padding:18px 8px 20px; margin-bottom:8px; border-bottom:1px solid rgba(255,255,255,.1); } .brand img{width:34px; height:34px; border-radius:8px; flex:0 0 auto} .brand span{ display:flex; flex-direction:column; color:#fff; font-weight:700; font-size:15px; letter-spacing:.3px; line-height:1.15; } .brand small{font-weight:500; font-size:11.5px; letter-spacing:1.4px; color:#9fb4d6; text-transform:uppercase} nav button{ border:0; background:none; padding:11px 14px; font-size:14.5px; font-weight:600; color:#c3d0e4; cursor:pointer; text-align:left; border-radius:var(--r-sm); position:relative; font-family:inherit; transition:background .13s, color .13s; } nav button:hover{background:rgba(255,255,255,.07); color:#fff} nav button.on{background:var(--navy-lift); color:#fff} nav button.on::before{ content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:#8fb6ee; } nav button:focus-visible{outline:2px solid #8fb6ee; outline-offset:1px} /* ------------------------------------------------------------------ main -- */ main{grid-area:main; padding:24px 26px 40px; max-width:1500px; width:100%} .card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:24px; margin-bottom:18px; box-shadow:var(--shadow-sm); } .card h2{margin:0 0 5px; font-size:17px; font-weight:680; letter-spacing:-.1px} .card p.sub{margin:0 0 20px; color:var(--muted); font-size:14px} /* --------------------------------------------------------------- offline -- */ .offline{ display:none; align-items:center; gap:9px; background:var(--amber-bg); color:var(--amber); border-bottom:1px solid #e8d59a; padding:9px 26px; font-size:13.5px; font-weight:650; } body.is-offline .offline{display:flex} .offline::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--amber-mid); flex:0 0 auto; } /* ======================================================== OVERVIEW ======== */ .tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:13px; margin-bottom:20px; } .tile{ background:var(--card); border:1px solid var(--line); border-left:4px solid var(--faint); border-radius:var(--r); padding:16px 17px; text-align:left; cursor:pointer; font-family:inherit; box-shadow:var(--shadow-sm); transition:transform .12s, box-shadow .12s, border-color .12s; } .tile:hover{transform:translateY(-2px); box-shadow:var(--shadow)} .tile:focus-visible{outline:2px solid var(--accent); outline-offset:2px} .tile .num{ display:block; font-size:31px; font-weight:720; line-height:1.05; letter-spacing:-1px; font-variant-numeric:tabular-nums; color:var(--ink); } .tile .lbl{ display:block; margin-top:5px; font-size:12.5px; font-weight:650; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; } .tile .hint2{display:block; margin-top:3px; font-size:12px; color:var(--faint); font-weight:500} /* A tile that is counting a problem carries the problem's colour. At zero it goes quiet and grey - a bright "0 overdue" reads as a status light that is lit, which is exactly the wrong thing to draw the eye. */ .tile.zero{border-left-color:var(--line); opacity:.72} .tile.zero .num{color:var(--faint)} .tile.red {border-left-color:var(--red)} .tile.red .num {color:var(--red)} .tile.amber {border-left-color:var(--amber-mid)} .tile.amber .num {color:var(--amber)} .tile.blue {border-left-color:var(--blue)} .tile.blue .num {color:var(--blue)} .tile.purple{border-left-color:var(--purple)} .tile.purple .num{color:var(--purple)} .tile.navy {border-left-color:var(--navy)} .tile.navy .num {color:var(--navy)} .tile.green {border-left-color:var(--green)} .tile.green .num {color:var(--green)} /* ---- needs attention ---- */ .att{display:flex; flex-direction:column; gap:0} .att-row{ display:flex; align-items:center; gap:13px; padding:12px 4px; border-bottom:1px solid var(--line-soft); } .att-row:last-child{border-bottom:0} .att-tail{font-weight:700; font-variant-numeric:tabular-nums; min-width:82px; font-family:"Consolas",monospace} .att-type{color:var(--muted); font-size:13px; min-width:132px} .att-why{margin-left:auto; display:flex; align-items:center; gap:9px} .att-go{ background:none; border:0; color:var(--accent); font-weight:650; font-size:13.5px; cursor:pointer; font-family:inherit; padding:4px 6px; border-radius:5px; } .att-go:hover{background:var(--navy-soft)} .allclear{ display:flex; align-items:center; gap:11px; padding:22px 4px; color:var(--green); font-weight:650; font-size:15px; } .allclear::before{ content:"\2713"; width:26px; height:26px; border-radius:50%; background:var(--green-bg); display:grid; place-items:center; font-size:15px; flex:0 0 auto; } .splitline{ display:flex; gap:26px; flex-wrap:wrap; padding:14px 4px 2px; color:var(--muted); font-size:13.5px; } .splitline b{color:var(--ink); font-variant-numeric:tabular-nums} /* ------------------------------------------------------------------ form -- */ .field{margin-bottom:19px; max-width:520px} .field label{display:block; font-weight:650; margin-bottom:7px; font-size:15px} .field label .n{ display:inline-block; width:23px; height:23px; line-height:23px; text-align:center; background:var(--navy); color:#fff; border-radius:50%; font-size:12.5px; margin-right:9px; font-weight:700; } .field input,.field select,.field textarea{ width:100%; padding:12px 14px; font-size:17px; font-family:inherit; border:1.5px solid var(--line); border-radius:var(--r-sm); background:#fff; color:var(--ink); transition:border-color .12s, box-shadow .12s; } .field input:focus,.field select:focus,.field textarea:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(45,108,181,.14); } .hint{font-size:13px; color:var(--muted); margin-top:6px} .flag{margin-top:8px; font-size:14px; font-weight:650; padding:9px 12px; border-radius:var(--r-sm); display:none} .flag.show{display:block} .flag.ok{background:var(--green-bg); color:var(--green)} .flag.warn{background:var(--amber-bg); color:var(--amber)} .banner{padding:15px 17px; border-radius:var(--r-sm); margin-bottom:21px; font-size:15px; font-weight:600; line-height:1.45} .banner.idle{background:var(--line-soft); color:var(--muted); font-weight:500} .banner.new{background:var(--green-bg); color:var(--green)} .banner.seen{background:var(--amber-bg); color:var(--amber)} .banner.stop{background:var(--red-bg); color:var(--red)} button.primary{ background:var(--navy); color:#fff; border:0; padding:13px 26px; font-size:16px; font-weight:650; border-radius:var(--r-sm); cursor:pointer; font-family:inherit; box-shadow:var(--shadow-sm); transition:background .13s, transform .1s; } button.primary:hover:not(:disabled){background:var(--navy-lift)} button.primary:active:not(:disabled){transform:translateY(1px)} button.primary:disabled{background:#b5bdc9; cursor:not-allowed; box-shadow:none} button.ghost{ background:#fff; color:var(--navy); border:1.5px solid var(--line); padding:9px 16px; font-size:14px; font-weight:650; border-radius:var(--r-sm); cursor:pointer; font-family:inherit; transition:border-color .12s, background .12s; } button.ghost:hover{border-color:var(--accent); background:#fbfcfe} button:focus-visible{outline:2px solid var(--accent); outline-offset:2px} .row{display:flex; gap:10px; flex-wrap:wrap; align-items:center} /* ----------------------------------------------------------------- table -- */ .toolbar{display:flex; gap:10px; align-items:center; margin-bottom:15px; flex-wrap:wrap} .toolbar input[type=search]{ padding:10px 14px; font-size:15.5px; border:1.5px solid var(--line); border-radius:var(--r-sm); min-width:260px; font-family:inherit; } .toolbar input[type=search]:focus{outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(45,108,181,.14)} table{width:100%; border-collapse:collapse; font-size:14.5px} th{ background:var(--navy); color:#fff; text-align:left; padding:11px 10px; font-weight:650; font-size:12px; text-transform:uppercase; letter-spacing:.5px; position:sticky; top:0; z-index:2; } td{padding:11px 10px; border-bottom:1px solid var(--line-soft); vertical-align:top} tbody tr{transition:background .1s} tbody tr:hover{background:#f7f9fc} tr.overdue td{background:var(--red-bg)} tr.d30 td{background:var(--red-bg)} tr.d90 td{background:var(--amber-bg)} tr.cryo td{background:var(--blue-bg)} tr.nobottle td{background:var(--purple-bg)} tr.badbottle td{background:var(--red-bg)} .pill{display:inline-block; padding:3px 10px; border-radius:11px; font-size:11.5px; font-weight:700; white-space:nowrap; letter-spacing:.3px} .pill.click{cursor:pointer; text-decoration:underline; text-underline-offset:2px} .pill.click:hover{filter:brightness(1.12)} .pill.overdue{background:var(--red-deep); color:#fff} .pill.d30{background:var(--red); color:#fff} .pill.d90{background:var(--amber-mid); color:#fff} .pill.ok{background:var(--green-bg); color:var(--green)} .pill.cryo{background:var(--blue); color:#fff} .pill.nobottle{background:var(--purple); color:#fff} .pill.badbottle{background:var(--red-deep); color:#fff} /* Loan note sits under the bottle badge - quieter than a pill, still readable. */ .loan{display:block; margin-top:3px; font-size:11.5px; color:var(--purple); font-weight:650} .nofit{color:var(--purple); font-weight:700} /* Notes are rare and long. On screen the cell holds a small button; the full text only renders on the printout, where there is room for it. */ .notebtn{border:1px solid var(--line); border-radius:5px; padding:3px 9px; font-size:12.5px; background:#fff} .notebtn:hover{border-color:var(--accent); text-decoration:none} .printonly{display:none} /* Colour-blind-safe second cue: the dot carries the same signal as the pill, and the ring shape differs from the filled ones so it reads without colour too. */ td.dotcell{width:26px; padding-left:14px} .dot{display:inline-block; width:13px; height:13px; border-radius:50%; vertical-align:middle} .dot.overdue{background:var(--red-deep); box-shadow:0 0 0 3px rgba(140,29,24,.22)} .dot.d30{background:var(--red)} .dot.d90{background:#e0a300} .dot.ok{background:transparent; border:2px solid #9fb3a6} .dot.cryo{background:var(--blue); box-shadow:0 0 0 3px rgba(20,86,122,.2)} .dot.nobottle{background:var(--purple); box-shadow:0 0 0 3px rgba(107,63,160,.2)} .dot.badbottle{background:var(--red-deep); box-shadow:0 0 0 3px rgba(140,29,24,.22)} th.dothead{width:26px; padding-left:14px} .empty{padding:48px; text-align:center; color:var(--muted)} .mono{font-variant-numeric:tabular-nums; font-family:"Consolas",monospace; white-space:nowrap} .act{color:var(--accent); background:none; border:0; font-weight:650; cursor:pointer; font-size:13.5px; padding:4px 6px; border-radius:5px; font-family:inherit} td.actions{white-space:nowrap; text-align:right} /* keep edit/bottle/deliver on one line */ .act:hover{background:var(--navy-soft)} /* Location is editable in place on anything still active - it reads as plain text until you hover, so the list stays calm but the change is one click. */ .locsel{ font:inherit; color:inherit; padding:4px 22px 4px 6px; border-radius:6px; cursor:pointer; border:1px solid transparent; background:transparent; appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 12px) 52%,calc(100% - 7px) 52%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; } .locsel:hover{border-color:var(--accent); background-color:#fff} .locsel:focus{outline:2px solid var(--accent); outline-offset:-1px} /* The table scrolls sideways inside its own box rather than dragging the whole page with it - that is what makes the lists usable on a phone. */ .tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch} /* --------------------------------------------------------------- dialogs -- */ dialog{ border:0; border-radius:var(--r-lg); padding:0; max-width:620px; width:calc(100% - 32px); box-shadow:var(--shadow-lg); color:var(--ink); } dialog::backdrop{background:rgba(19,25,35,.55)} .dlg{padding:26px} .dlg h3{margin:0 0 3px; font-size:19px; font-weight:680} .dlg .who{margin:0 0 20px; color:var(--muted); font-size:14px} .grid{display:grid; grid-template-columns:1fr 1fr; gap:14px} .grid .full{grid-column:1/-1} .grid label{display:block; font-weight:650; font-size:12.5px; margin-bottom:5px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px} .grid input,.grid select,.grid textarea{ width:100%; padding:10px 12px; font-size:15.5px; font-family:inherit; border:1.5px solid var(--line); border-radius:var(--r-sm); background:#fff; color:var(--ink); } .grid input:focus,.grid select:focus,.grid textarea:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(45,108,181,.14); } #editErr{margin-top:14px; white-space:pre-line} menu{display:flex; gap:10px; margin:22px 0 0; padding:0; justify-content:flex-end; flex-wrap:wrap} menu .spacer{margin-right:auto} button.danger{color:var(--red); border-color:#f0c8c4} button.danger:hover{border-color:var(--red); background:var(--red-bg)} /* The M is fixed furniture, not something to type - it reads as one field. */ .stampbox{ width:200px; max-width:100%; padding:11px 15px; font-size:20px; font-weight:700; font-family:inherit; letter-spacing:3px; text-transform:uppercase; border:1.5px solid var(--navy); border-radius:var(--r-sm); background:#fff; color:var(--ink); } .stampbox:focus{outline:0; box-shadow:0 0 0 3px rgba(45,108,181,.18)} /* A native date input always renders in the browser's locale format, so the visible box stays plain text in YYYYMMDD and the calendar lives behind a button that writes back in that same format. */ .datefield{display:flex; align-items:stretch} .datefield input{flex:1; min-width:0; border-radius:var(--r-sm) 0 0 var(--r-sm) !important} .datefield .calbtn{ border:1.5px solid var(--line); border-left:0; border-radius:0 var(--r-sm) var(--r-sm) 0; background:#fff; cursor:pointer; padding:0 13px; font-size:17px; line-height:1; } .datefield .calbtn:hover{border-color:var(--accent); background:var(--navy-soft)} /* ---------------------------------------------------------- sign-in gate -- */ #loginWrap{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; background:radial-gradient(1100px 620px at 22% 8%, var(--navy-lift) 0%, var(--navy) 42%, var(--navy-deep) 100%); padding:20px; } #loginWrap[hidden]{display:none} .loginbox{ background:#fff; border-radius:var(--r-lg); padding:34px; width:100%; max-width:394px; box-shadow:0 24px 70px rgba(0,0,0,.4); } .loginmark{display:flex; align-items:center; gap:12px; margin-bottom:20px} .loginmark img{width:42px; height:42px; border-radius:10px} .loginbox h1{margin:0; font-size:20px; color:var(--navy); font-weight:700; letter-spacing:-.2px} .loginbox p{margin:0 0 24px; color:var(--muted); font-size:14px} .loginbox label{display:block; font-weight:650; font-size:12.5px; margin:0 0 6px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px} .loginbox input{width:100%; margin-bottom:17px} .loginbox input[type=password]{ padding:12px 14px; font-size:17px; font-family:inherit; letter-spacing:2px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:#fff; color:var(--ink); } .loginbox input[type=password]:focus{outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(45,108,181,.14)} .loginbox button{width:100%} .loginbox .flag{margin:0 0 14px} /* ============================================================== responsive */ @media (max-width:900px){ body{grid-template-columns:minmax(0,1fr); grid-template-areas:"header" "nav" "main"} nav{ flex-direction:row; gap:4px; padding:0 10px; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; background:var(--card); border-right:0; border-bottom:1px solid var(--line); } .brand{display:none} /* the header already says the name */ nav button{ color:var(--muted); padding:13px 15px; white-space:nowrap; border-radius:0; border-bottom:3px solid transparent; } nav button:hover{background:#f7f9fc; color:var(--ink)} nav button.on{background:none; color:var(--navy); border-bottom-color:var(--navy)} nav button.on::before{display:none} main{padding:18px 16px 34px} header{padding:12px 16px} .offline{padding:9px 16px} } @media (max-width:700px){ main{padding:12px 12px 30px} /* Tighter cells so the table needs less sideways swiping, and finger-sized action buttons - 21px targets are not hittable on a phone. */ th{font-size:11px; padding:9px 7px; letter-spacing:.2px} td{padding:8px 7px; font-size:13px} .act{padding:9px 8px; font-size:13px; display:inline-block; min-height:34px; line-height:18px} td.actions{white-space:nowrap} .pill{font-size:11px; padding:3px 8px} .locsel{font-size:13px; padding:7px 20px 7px 5px; min-height:34px} .notebtn{min-height:34px; padding:7px 10px} .toolbar{gap:8px} /* Search gets its own row; the report picker and Print share the next one. */ .toolbar input[type=search]{width:100%; flex:1 1 100%; min-width:0} .toolbar select{flex:1 1 auto; width:auto; min-width:0} .toolbar button{flex:0 0 auto} /* The Purge Status pill goes on a phone - the coloured dot and the Days column already carry that signal, and it buys back a whole column. */ .col-due{display:none} .card{padding:16px} header h1{font-size:15px} header .count{margin-left:0; width:100%; font-size:12.5px; text-align:left} .field{max-width:none} .tiles{grid-template-columns:repeat(auto-fill,minmax(142px,1fr)); gap:10px} .tile{padding:13px 14px} .tile .num{font-size:26px} .att-row{flex-wrap:wrap; gap:8px} .att-type{min-width:0} .att-why{margin-left:0; width:100%} .grid{grid-template-columns:1fr} /* dialogs go single column */ dialog{max-width:none; width:calc(100% - 18px)} .dlg{padding:19px} menu{flex-direction:column-reverse} menu button{width:100%} menu .spacer{margin-right:0} th{position:static} /* sticky headers fight touch scroll */ } /* ===================================================== phone card layout == A ten-column table on a 375px screen means dragging the list sideways to read one aircraft, which is how you misread a tail number. Below 760px each row becomes its own card with the column name printed against each value, and nothing scrolls sideways at all. The header row is dropped because every value now carries its own label. Print undoes all of this - see the print block, which re-asserts table display. */ @media (max-width:760px){ .tablewrap{overflow-x:visible} #v-list table,#v-list tbody,#v-list tr,#v-list td, #v-history table,#v-history tbody,#v-history tr,#v-history td{display:block; width:auto} #v-list thead,#v-history thead{display:none} #v-list tr,#v-history tr{ background:var(--card); border:1px solid var(--line); border-left:4px solid var(--line); border-radius:var(--r); margin-bottom:10px; padding:11px 13px; box-shadow:var(--shadow-sm); } #v-list tbody tr:hover,#v-history tbody tr:hover{background:var(--card)} /* The card's left edge carries the colour the row tint used to. */ #v-list tr.overdue {border-left-color:var(--red-deep)} #v-list tr.d30 {border-left-color:var(--red)} #v-list tr.d90 {border-left-color:var(--amber-mid)} #v-list tr.cryo {border-left-color:var(--blue)} #v-list tr.nobottle {border-left-color:var(--purple)} #v-list tr.badbottle{border-left-color:var(--red-deep)} #v-list tr.overdue td,#v-list tr.d30 td,#v-list tr.d90 td, #v-list tr.cryo td,#v-list tr.nobottle td,#v-list tr.badbottle td{background:transparent} #v-list td,#v-history td{ border:0; padding:3px 0; font-size:14px; display:flex; gap:10px; align-items:baseline; } #v-list td::before,#v-history td::before{ content:attr(data-label); flex:0 0 112px; min-width:112px; color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; line-height:1.5; } /* An empty cell prints an orphan label, so drop it entirely. */ #v-list td:empty,#v-history td:empty{display:none} #v-list td.dotcell{display:none} /* the card edge already says this */ #v-list td.actions,#v-history td.actions{ display:flex; gap:4px; justify-content:flex-start; text-align:left; margin-top:9px; padding-top:9px; border-top:1px solid var(--line-soft); } #v-list td.actions::before,#v-history td.actions::before{content:none} #v-list td.actions .act{ flex:1 1 auto; text-align:center; background:var(--navy-soft); min-height:38px; } /* The tail is the identifier - it gets to be the card's headline. */ #v-list td[data-label="Acft Serial #"]{font-size:17px; font-weight:700; padding-bottom:6px} .col-due{display:none} .empty{padding:30px 12px} } /* =================================================================== print */ .printhead{display:none} @media print{ /* The grid is screen furniture. On paper the content is the whole page. */ body{display:block; background:#fff; font-size:11px} .tablewrap{overflow:visible} header,nav,.toolbar,.noprint,.offline,.card>h2,.card>p.sub{display:none !important} /* Ctrl+P on the Overview used to give a near-blank sheet. It now prints as a summary: the counts as a line of text, then the attention list. */ .tiles{display:block !important; margin:0 0 10px} .tile{display:inline-block !important; border:0 !important; box-shadow:none !important; padding:0 14px 0 0 !important; transform:none !important} .tile .num{display:inline !important; font-size:12px !important; letter-spacing:0 !important} .tile .lbl{display:inline !important; font-size:10px !important; margin:0 0 0 3px !important} .tile .hint2{display:none !important} .tile.zero{opacity:1} .att-row{padding:3px 0 !important; font-size:10.5px} .att-go{display:none !important} .splitline{font-size:10.5px; padding:6px 0 0} .locsel{border:0 !important; background:none !important; padding:0 !important; appearance:none} .printonly{display:inline} .col-due{display:table-cell !important} /* paper always gets every column */ main{padding:0; max-width:none} .card{border:0; padding:0; margin:0; box-shadow:none} .printhead{display:block; margin-bottom:10px} .printhead h2{margin:0 0 3px; font-size:16px; color:var(--navy)} .printhead .meta{font-size:10px; color:#333} .printhead .warn{font-size:10px; color:var(--red); font-weight:700; margin-top:3px} /* Paper is never a phone. Undo the card layout explicitly so a narrow print width can never leave the lists stacked. */ #v-list table,#v-history table{display:table !important; width:100% !important} #v-list thead,#v-history thead{display:table-header-group !important} #v-list tbody,#v-history tbody{display:table-row-group !important} #v-list tr,#v-history tr{display:table-row !important; border:0 !important; padding:0 !important; margin:0 !important; box-shadow:none !important; background:none !important} #v-list td,#v-history td{display:table-cell !important; padding:4px 6px !important} #v-list td::before,#v-history td::before{content:none !important} #v-list td.dotcell{display:table-cell !important} th{background:var(--navy) !important; color:#fff !important; font-size:9.5px; padding:5px 6px; position:static; -webkit-print-color-adjust:exact; print-color-adjust:exact} td{padding:4px 6px; font-size:10.5px} tr.overdue td,tr.d30 td,tr.d90 td,tr.cryo td,tr.nobottle td,tr.badbottle td,.pill,.dot{ -webkit-print-color-adjust:exact; print-color-adjust:exact} .act{display:none} } @media (prefers-reduced-motion:reduce){ *{transition:none !important} .tile:hover{transform:none} }