/* =========================================================================
   My Assets.

   A read screen, not a console: someone opens it to find a serial number or
   check what is on their name. Typographic rather than chart-driven.

   Prefixed .as- throughout, because the surrounding app styles are broad and
   unscoped.

   Every colour and font below comes from portal-tokens.css, which reads them
   out of the portal's own stylesheets. The local --as-* names are kept as
   aliases so the rules further down stay readable, but each one now points at
   a portal token -- this screen has no palette of its own. An earlier version
   did (a slate built around #345675, a colour that appears nowhere else in the
   product), which is what made these tabs look like a different application.
   ========================================================================= */

.assets_page {
	--as-ink:     var(--pt-ink);
	--as-body:    var(--pt-body);
	--as-soft:    var(--pt-body);
	/* Was --pt-muted. At 10px uppercase with letter-spacing, a 4.7:1 grey is
	   legible by the numbers but genuinely hard to read -- the field labels
	   and the peripheral chips faded into the card. The hierarchy now comes
	   from size and weight, with values in --as-ink above labels in --as-body,
	   rather than from making the labels pale. */
	--as-faint:   var(--pt-body);
	--as-rule:    var(--pt-rule);
	--as-rule-lt: var(--pt-rule-lt);
	--as-surface: var(--pt-surface);
	--as-ground:  var(--pt-ground);
	--as-accent:  var(--pt-primary-dark);

	--as-sans: var(--pt-sans);
	--as-mono: var(--pt-mono);

	font-family: var(--as-sans);
	font-size: var(--pt-size-base);
	color: var(--as-body);
}

/* ------------------------------------------------------------- container
   Without a ceiling the content stretched the full width of a large monitor,
   leaving one card marooned beside several columns of nothing. Capping it
   keeps the cards together and the line lengths readable. */
.assets_page .as-wrap { max-width: 1320px; }
/* The inventory frame runs full width, so its heading should too -- otherwise
   the title sits in a narrower column than the panel beneath it. */
.assets_page .as-wrap.as-wide { max-width: none; }

/* Inset from the page edge rather than flush, and tall enough that the table
   inside scrolls on its own instead of the whole portal scrolling. */
.assets_page .as-frame {
	width: 100%;
	height: calc(100vh - 168px);
	min-height: 620px;
	border: 1px solid var(--as-rule);
	border-radius: var(--pt-radius-lg);
	background: var(--pt-surface);
	display: block;
}

/* ---------------------------------------------------------------- heading
   Built here rather than inside the app's .page_title, whose bottom border was
   cutting through the scope line. */
.assets_page .as-head {
	display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
	margin-bottom: 20px;
}
/* The portal marks a page with a short 3px rule under the title itself
   (.page_title in attendance.css), not a hairline across the whole row.
   Matched here so this tab is stamped the same way as Attendance and Leave. */
.assets_page .as-head h2 {
	margin: 0; padding-bottom: 6px;
	font-size: var(--pt-size-title); font-weight: var(--pt-weight-semi);
	color: var(--as-ink); line-height: 1.2;
	border-bottom: 3px solid var(--pt-primary);
}
.assets_page .as-scope {
	font-size: var(--pt-size-sm); color: var(--as-soft);
	font-weight: var(--pt-weight-normal);
}
.assets_page .as-head-actions { margin-left: auto; display: flex; gap: 8px; }

/* ------------------------------------------------------- person grouping
   People sit side by side across the width. One person per full-width band
   left a manager with six reports looking at six rows each holding a single
   card, with most of the row empty.

   align-items: start so a colleague with five devices does not stretch the
   blocks beside them; the columns stay independent. */
.assets_page .as-people {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(345px, 1fr));
	gap: 26px 24px;
	align-items: start;
}
.assets_page .as-person { min-width: 0; }

.assets_page .as-person-head {
	display: flex; align-items: center; gap: 10px;
	margin-bottom: 12px;
}

/* Initials, because the directory holds no photographs and a broken image
   placeholder would look worse than none. */
.assets_page .as-avatar {
	width: 30px; height: 30px; border-radius: 50%; flex: none;
	background: var(--as-accent); color: var(--pt-on-fill);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 600; letter-spacing: .01em;
}
/* Your own row, distinguished from colleagues'. Green rather than a portal
   blue so it reads as "mine" and not as another category. 5.2:1 on white. */
.assets_page .as-avatar.as-mine { background: #1c7c3f; }

.assets_page .as-person-name {
	font-size: 14px; font-weight: var(--pt-weight-semi); color: var(--as-ink); letter-spacing: -.01em;
}
.assets_page .as-person-title {
	font-size: var(--pt-size-xs); color: var(--as-faint);
	padding-left: 10px; border-left: 1px solid var(--as-rule); line-height: 1.1;
}
.assets_page .as-count {
	margin-left: auto; font-size: var(--pt-size-xs); color: var(--as-faint);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ cards
   Flex rather than grid: a person with one device should get one card of a
   sensible width, not a card stretched across an eight-column track. */
.assets_page .as-grid {
	display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch;
}

.assets_page .as-card {
	flex: 1 1 100%; min-width: 0;
	border: 1px solid var(--as-rule); border-radius: var(--pt-radius-lg);
	background: var(--as-surface);
	padding: 15px 17px 14px;
	display: flex; flex-direction: column; gap: 12px;
	transition: box-shadow .16s ease, border-color .16s ease;
}
.assets_page .as-card:hover {
	border-color: var(--pt-border);
	box-shadow: var(--pt-shadow);
}

.assets_page .as-card-top {
	display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
	line-height: 1;
}

/* The asset tag is what you quote when you call IT, so it carries the most
   weight on the card. */
.assets_page .as-tag {
	font-family: var(--as-mono);
	font-size: 15px; font-weight: 600; color: var(--as-ink); letter-spacing: -.01em;
}

.assets_page .as-type {
	font-size: var(--pt-size-label); font-weight: 700; letter-spacing: .09em;
	text-transform: uppercase;
	border-radius: 3px; padding: 4px 7px 3px;
	background: #eef1f4; color: var(--pt-body);
}
/* One tint per family -- enough to tell a laptop from a monitor while
   scanning, few enough to remember. Each pair is the portal hue over a wash
   of itself; the text is checked against its own tint, not against white,
   and the weakest of them is 5.0:1 at this uppercase label size. The same
   hue order is used on the org chart, so a category keeps one colour across
   the portal. */
.assets_page .as-type.t-desktop { background: #e6f0f8; color: #035fa5; }
.assets_page .as-type.t-laptop  { background: #eceafa; color: #4a3fbe; }
.assets_page .as-type.t-display { background: #e0f2f0; color: #00726b; }
.assets_page .as-type.t-input   { background: #f5f0dd; color: #7a6000; }
.assets_page .as-type.t-network { background: #e8edfb; color: #3457c9; }
.assets_page .as-type.t-server  { background: #f5e8fa; color: #9339b3; }
.assets_page .as-type.t-other   { background: #eff1f3; color: #5c646b; }

.assets_page .as-name {
	font-size: 13px; font-weight: var(--pt-weight-medium); color: var(--as-ink);
	line-height: 1.35; margin-top: -5px;
}

/* -------------------------------------------------------------------- spec
   A label/value grid: this is scanned for one value, not read. The label
   column is fixed so values line up down the card. */
.assets_page .as-spec {
	margin: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr);
	gap: 6px 14px; align-items: baseline;
}
.assets_page .as-spec dt {
	font-size: var(--pt-size-label); color: var(--as-faint); font-weight: 600;
	letter-spacing: .07em; text-transform: uppercase; line-height: 1.5;
}
.assets_page .as-spec dd {
	margin: 0; font-size: var(--pt-size-sm); color: var(--as-ink);
	line-height: 1.45; word-break: break-word;
}
.assets_page .as-spec dd.as-mono {
	font-family: var(--as-mono); font-size: 12.5px; color: var(--as-ink);
	letter-spacing: -.01em;
}

/* ------------------------------------------------------------ peripherals */
.assets_page .as-periph {
	display: flex; flex-wrap: wrap; gap: 5px;
	padding-top: 11px; border-top: 1px solid var(--as-rule-lt);
}
.assets_page .as-periph-label {
	width: 100%; font-size: var(--pt-size-label); color: var(--as-faint); font-weight: 600;
	letter-spacing: .09em; text-transform: uppercase; margin-bottom: 3px;
}
.assets_page .as-chip {
	font-size: var(--pt-size-xs); line-height: 1.5;
	background: var(--as-ground); border: 1px solid var(--as-rule);
	/* Body rather than muted: muted on the ground tint is 4.44:1, just under. */
	border-radius: 11px; padding: 2px 9px; color: var(--as-body);
}
.assets_page .as-chip b { font-weight: 600; color: var(--as-ink); }

/* ----------------------------------------------------------------- remarks
   Often the only note about a machine, and usually the interesting one.  */
.assets_page .as-remark {
	font-size: var(--pt-size-xs); color: var(--as-soft); line-height: 1.5;
	padding-top: 11px; border-top: 1px solid var(--as-rule-lt);
	margin-top: auto;
}
.assets_page .as-remark::before {
	content: "Note"; display: block;
	font-size: var(--pt-size-label); font-weight: 600; letter-spacing: .09em;
	text-transform: uppercase; color: var(--as-faint); margin-bottom: 3px;
}

/* ------------------------------------------------------------------ empty */
.assets_page .as-empty {
	border: 1px dashed var(--as-rule); border-radius: var(--pt-radius-lg);
	padding: 34px 26px; text-align: center;
	color: var(--as-soft); background: var(--as-ground); max-width: 560px;
}
.assets_page .as-empty strong { color: var(--as-ink); font-size: 14px; }
.assets_page .as-empty p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; }

.assets_page .as-help {
	/* Sized up from --pt-size-xs and set in ink at semibold: this is the one
	   instruction on the page, and at 12px muted it read as small print people
	   scroll past. */
	font-size: var(--pt-size-sm);
	font-weight: var(--pt-weight-semi);
	color: var(--as-ink); line-height: 1.6;
	margin-top: 22px; padding-top: 14px;
	/* No max-width. A 68ch cap is right for a paragraph, but this is a single
	   closing sentence under a full-width grid, and capping it left the text
	   hugging the left third of the page under a rule that spanned all of it. */
	border-top: 1px solid var(--as-rule);
}

@media (max-width: 700px) {
	.assets_page .as-people { grid-template-columns: 1fr; gap: 22px; }
	.assets_page .as-count { margin-left: 0; width: 100%; }
}

@media print {
	.assets_page .as-card { break-inside: avoid; box-shadow: none; }
	.assets_page .as-help, .assets_page .as-head-actions { display: none; }
}