/* docs-css - the Platform Admin's document shelf: the upload template, the paper on screen,
   and the row that has not been read yet. */

/* the template is a form, not prose: a row of short fields - document, term, year, class, subject -
   with the two lines that need room, the title and the note to teachers, across the whole card.
   180px is the narrowest track that still fits all five on one line on a desktop card */
.docform{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:13px 14px}
.docform>div{display:flex;flex-direction:column;gap:5px;min-width:0}
.docform .wide{grid-column:1/-1}
.docform label{font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--mu)}

/* nothing else in the app takes a file, so the picker arrives with the browser's own paint -
   which puts its label in a colour that vanishes on the dark card */
.docup input[type=file]{font:inherit;color:var(--tx);background:var(--field);border:1px solid var(--bd);border-radius:12px;padding:9px 12px;width:100%}
.docup input[type=file]::file-selector-button{font:inherit;font-weight:700;font-size:12.5px;color:var(--tx);background:var(--sf);border:1px solid var(--bd);border-radius:999px;padding:6px 13px;margin-right:10px;cursor:pointer}
.docup input[type=file]:focus-visible{outline:3px solid var(--ac);outline-offset:2px}

/* a document this account has not opened yet is the one to read, so the whole row says so and
   not only the tag inside it. The marker is on the tag, because every other table in the app
   is built by the same helper and would otherwise pick this treatment up too.
   The wash alone is not the mark - measured against a read row it is 1.21 in the dark theme and
   only 1.09 in the light one, where the card is white - so the row carries a bar of the accent
   itself on the edge of the cell. Inset, because a border would move the columns. */
tbody tr:has([data-xdoc]){background:color-mix(in srgb,var(--accent) 8%,transparent)}
tbody tr:has([data-xdoc]) td{border-bottom-color:color-mix(in srgb,var(--accent) 20%,var(--bd))}
tbody tr:has([data-xdoc]) td:first-child{box-shadow:inset 3px 0 0 var(--accent)}

/* the on-screen paper gets the room a reader needs; the list behind it stays where it was */
.docprev{margin-top:14px}
.docprev iframe{display:block;width:100%;height:min(74vh,860px);border:1px solid var(--bd);border-radius:12px;background:var(--sf)}
/* a picture is shown at its own size, centred, and only scaled down when the card is narrower -
   an iframe would stretch a timetable screenshot across a field of nothing */
.docprev img{display:block;max-width:100%;max-height:min(74vh,860px);margin:0 auto;border-radius:12px;background:var(--sf)}
@media (max-width:560px){.docprev iframe{height:60vh}.docprev img{max-height:60vh}}

/* five columns of sentences do not fit a phone. The app already answers this for its wide tables
   by letting them run past the screen inside .tw, which is what the class cards do; the shelf's
   own table is wrapped so the same rule cannot be picked up anywhere else */
@media (max-width:640px){.docshelf .tw table{min-width:640px}}