/* PREVIEW (10-02): the office pages in the Energy Glass look — like energyglass.com.my: a white header
   with the logo, then the dark navy menu bar; sky-blue for links and the current page, navy buttons,
   Open Sans, square corporate corners. Loaded on top of site.css only when the preview is on
   (?look=glass); everything else about the pages is unchanged. */

html.glass {
    --ink: #1f2a35; --muted: #6f7b87; --line: #e3e8ee; --bg: #f4f7fb; --card: #fff;
    --brand: #1477c2; --navy: #1c2b3a; --navy-2: #24384c; --sky: #22a3f9;
}
html.glass body { font-family: "Open Sans", system-ui, "Segoe UI", Roboto, Arial, sans-serif; }

/* white logo header (as on the website) */
.eg-head { display: none; }
html.glass .eg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: #fff; border-bottom: 1px solid #e6eaef; padding: 10px 20px; }
html.glass .eg-head img { height: 44px; width: auto; display: block; max-width: 60vw; object-fit: contain; object-position: left center; }
html.glass .eg-head .tag { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: #b45309; background: #fff4e5;
    padding: 4px 8px; border-radius: 4px; text-decoration: none; }

/* the navy menu bar: current page = sky-blue text with a sky-blue line under it (no pill) */
html.glass .top { background: var(--navy); box-shadow: 0 2px 6px rgba(28, 43, 58, .18); padding: 0 16px; gap: 10px; }
html.glass .top nav { gap: 0; }
/* PC: menu centred (his request 10-02). An invisible block on the left, about as wide as the name +
   sign-out on the right, balances the bar so the menu sits in the middle of the page; when the bar is
   tight (admin menu on a 1366 px laptop) that block gives way first, so the menu never wraps to 2 rows.
   The phone ☰ menu below 820 px is unchanged. */
@media (min-width: 821px) {
    html.glass .top { flex-wrap: nowrap; }                     /* name + sign out never drop to a second line */
    html.glass .top::before { content: ""; flex: 0 1000000 150px; min-width: 0; }
    html.glass .top nav { flex: 1 1 auto; min-width: 0; justify-content: center; }   /* keeps its full width; the spacer gives way first */
}
html.glass .top nav a { border-radius: 0; padding: 14px 14px 12px; border-bottom: 3px solid transparent; opacity: .85;
    text-transform: uppercase; letter-spacing: .04em; font-size: 13px; font-weight: 600; }
html.glass .top nav a:hover { background: rgba(255, 255, 255, .06); opacity: 1; }
html.glass .top nav a.on { background: none; color: var(--sky); border-bottom-color: var(--sky); opacity: 1; font-weight: 700; }
html.glass .top .who { font-size: 13px; }
html.glass .top .who .link { border-radius: 4px; }

/* page parts: square corners, navy buttons, sky focus */
html.glass h1 { font-weight: 700; color: var(--navy); }
html.glass .card { border-radius: 4px; border-color: var(--line); box-shadow: 0 1px 2px rgba(28, 43, 58, .05); }
html.glass .btn { border-radius: 4px; background: var(--navy); border-color: var(--navy); font-weight: 600; }
html.glass .btn:hover { background: #10202e; }
html.glass .btn.ghost { background: #fff; color: var(--navy); border-color: #c9d3dd; }
html.glass .btn.ghost:hover { border-color: var(--sky); color: var(--brand); }
html.glass input, html.glass select, html.glass textarea { border-radius: 4px; border-color: #ccd6e0; }
html.glass input:focus, html.glass select:focus, html.glass textarea:focus { outline: 2px solid var(--sky); outline-offset: 0; border-color: transparent; }
html.glass .alert { border-radius: 4px; }
html.glass table thead th { background: #eef3f8; color: var(--navy); }
html.glass table.trips tbody tr:hover td { background: #f0f6fc; }

/* a little less space between items so the full admin menu (9 items) stays on ONE row on a 1366 px laptop */
@media (min-width: 821px) { html.glass .top nav a { padding-left: 11px; padding-right: 11px; } }