@charset "utf-8";
/* ==========================================================================
   NANO TIME 2 — shared stylesheet
   This file is linked from every page in the system (474 PHP files), so it
   is written to restyle the site without requiring any markup changes.
   Every original selector below is preserved; only its declarations are
   modernized. New utility classes are additive and safe to ignore.
   ========================================================================== */

:root {
	--nt-green:        #069244;
	--nt-green-dark:   #04702f;
	--nt-green-deep:   #04521f;
	--nt-green-tint:   #e7f4ec;
	--nt-green-tint-2: #d3ecdd;
	--nt-ink:          #1c2b27;
	--nt-ink-soft:     #4d5e58;
	--nt-ink-faint:    #7c8b85;
	--nt-paper:        #f3f6f4;
	--nt-surface:      #ffffff;
	--nt-line:         #dde5e1;
	--nt-line-soft:    #eef2f0;
	--nt-red:          #c0392b;
	--nt-red-tint:     #fbeceb;
	--nt-amber:        #b9770e;
	--nt-amber-tint:   #fbf1e2;
	--nt-radius:       10px;
	--nt-radius-sm:    6px;
	--nt-shadow:       0 1px 2px rgba(20, 40, 30, .05), 0 6px 20px -8px rgba(20, 40, 30, .18);
	--nt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
		Arial, "Noto Sans", "Noto Sans Mongolian", sans-serif;
}

* { box-sizing: border-box; }

/* ---------------------------------------------------------------------- */
/* Base                                                                    */
/* ---------------------------------------------------------------------- */

body {
	background: var(--nt-paper);
	font-family: var(--nt-font);
	color: var(--nt-ink);
	font-size: 14px;
	line-height: 1.45;
	-webkit-text-size-adjust: 100%;
	zoom: 100%;
}

#header {
	background: var(--nt-green);
	width: 100%;
	height: 50px;
	color: #fff;
	font-size: 22px;
	font-weight: 600;
	font-family: var(--nt-font);
	display: flex;
	align-items: center;
	padding: 0 16px;
	letter-spacing: .2px;
}

/* Site-wide "app shell" card — this is the single biggest lever available
   without touching individual pages: nearly every page wraps its whole
   layout in <div class="mainpage">, so styling it gives every page a
   consistent, modern frame automatically. */
div.mainpage {
	width: 100%;
	max-width: 1180px;
	font-size: 13px;
	margin: 18px auto;
	color: var(--nt-ink);
	background: var(--nt-surface);
	border: 1px solid var(--nt-line);
	border-radius: var(--nt-radius);
	box-shadow: var(--nt-shadow);
	padding: 14px 16px 20px;
	overflow-x: auto;
}

@media (max-width: 720px) {
	div.mainpage {
		margin: 0;
		border-radius: 0;
		border-left: none;
		border-right: none;
		box-shadow: none;
		padding: 10px 8px 16px;
	}
}

#mainpage2 {
	display: table;
	border: none;
}

table {
	border-collapse: collapse;
}

/* !important is used deliberately in this block: roughly 135 of the 474
   pages carry their own inline <style>td, th {border:#9fa8b0 ...}</style>
   block that comes after this stylesheet in the cascade and would
   otherwise silently win on border color and padding, leaving those
   pages looking untouched. This is the one place in the file that
   overrides rather than just sets a default. */
/* Layout tables (no border attribute, or border="0") carry the page structure.
   Many pages put a "td, th {border:...}" rule inline, which drew grid lines
   through the whole layout; those lines are removed here. Real data grids
   (border="1", "4", ...) keep a thin border. */
table td, table th {
	border: none !important;
	padding: 4px 6px !important;
}

table[border]:not([border="0"]) td,
table[border]:not([border="0"]) th {
	border: solid var(--nt-line) 1px !important;
}

/* Header tint ONLY where the page did not pick its own colour. Reports colour
   attendance cells with <th bgcolor=...> and rows with <tr bgcolor=...>, and
   those colours carry meaning (present / late / weekend / leave), so they must
   never be overridden. Author CSS beats the bgcolor attribute, hence :not(). */
table th {
	font-weight: 600;
	text-align: left;
}
tr:not([bgcolor]) > th:not([bgcolor]):not([style*="background"]) {
	background: var(--nt-green-tint);
	color: var(--nt-green-deep);
}

/* The plain-text top menu row every page repeats (icon + link, separated
   by &nbsp;) isn't uniquely classed anywhere, so it can't be targeted
   safely and is left as enhanced links rather than converted into a nav
   bar without editing each of the 474 files individually. */
div.mainpage img[style*="20px"],
div.mainpage img[style*="15px"] {
	vertical-align: middle;
	opacity: .88;
}

a {
	color: var(--nt-green-dark);
	text-decoration: none;
}

a:hover, a:focus-visible {
	color: var(--nt-green-deep);
	text-decoration: underline;
}

/* ---------------------------------------------------------------------- */
/* Forms — inputs, selects, buttons                                       */
/* ---------------------------------------------------------------------- */

input[type="text"],
input[type="password"],
input[type="search"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="tel"],
select,
textarea,
.form-control {
	font-family: var(--nt-font);
	font-size: 13.5px;
	padding: 7px 10px;
	border: 1px solid #c3d0ca;
	border-radius: var(--nt-radius-sm);
	background: var(--nt-surface);
	color: var(--nt-ink);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus,
.form-control:focus {
	outline: none;
	border-color: var(--nt-green);
	box-shadow: 0 0 0 3px var(--nt-green-tint);
}

input[type="submit"],
input[type="button"],
button {
	font-family: var(--nt-font);
	font-size: 13.5px;
	padding: 7px 14px;
	border: 1px solid var(--nt-green);
	border-radius: var(--nt-radius-sm);
	background: var(--nt-green);
	color: #fff;
	cursor: pointer;
	transition: background-color .12s ease, border-color .12s ease;
}

/* Pages set inline text colours (blue / green / gray) meant for grey buttons;
   on a green button those are unreadable, so they are overridden. Buttons with their own
   class-based colours (e.g. white "chip" buttons) are left alone. */
button[style*="color"]:not([style*="background"]),
input[type="submit"][style*="color"]:not([style*="background"]),
input[type="button"][style*="color"]:not([style*="background"]),
button font {
	color: #fff !important;
}
button { min-width: max-content; white-space: nowrap; }
input[type="submit"], input[type="button"] { min-width: max-content; }

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
	background: var(--nt-green-dark);
	border-color: var(--nt-green-dark);
}

input[type="submit"]:active,
input[type="button"]:active,
button:active {
	background: var(--nt-green-deep);
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--nt-green);
}

/* `.userindex` is applied both to wrapper <div>s and to <button>s across
   the codebase, so it needs to look right in either role. */
div.userindex {
	padding-left: 10px;
	border: solid var(--nt-line) 0px;
}

button.userindex,
input.userindex {
	padding-left: 14px;
}

div.dayselect {
	padding-left: 10px;
	text-align: left;
	left: 0;
	margin: 0;
}

div.tailan1 {
	padding-left: 10px;
}

div.hicheel {
	padding-left: 10px;
	height: 150px;
	width: 100%;
	color: var(--nt-red);
	background: var(--nt-red-tint);
	font-size: 12px;
	font-family: var(--nt-font);
	border-radius: var(--nt-radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
}

div.upload  { padding-left: 50px; }
div.columns { width: 100px; }
div.columns div { width: 100px; height: 50px; float: left; }
div.grey    { background-color: var(--nt-line-soft); }
div.red     { background-color: var(--nt-red-tint); color: var(--nt-red); }
div.clear   { clear: both; }

/* ---------------------------------------------------------------------- */
/* Login banner + footer (index.php)                                      */
/* ---------------------------------------------------------------------- */

div.login {
	background: var(--nt-green);
	width: 100%;
	height: 100px;
	color: #fff;
	font-size: 36px;
}

#footer {
	text-align: center;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: 50px;
	color: var(--nt-ink-soft);
}

/* ---------------------------------------------------------------------- */
/* font/size tags still emitted by legacy PHP (<font color=gray size=2>)  */
/* ---------------------------------------------------------------------- */

font[color="gray"] { color: var(--nt-ink-faint) !important; }
font[color="red"]  { color: var(--nt-red) !important; }
font[color="white"]{ color: var(--nt-surface) !important; }

::selection { background: var(--nt-green-tint-2); }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}

/* ---------------------------------------------------------------------- */
/* Perceived speed: gentle enter animation, cheaper rendering              */
/* (pages that include /pwa/pwa-head.php also get the loading screen)      */
/* ---------------------------------------------------------------------- */

@keyframes nt-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
div.mainpage { animation: nt-enter .22s ease-out both; }

img { max-width: 100%; }

a, button, input, select, textarea { -webkit-tap-highlight-color: rgba(6, 146, 68, .15); }
:focus-visible { outline: 2px solid var(--nt-green); outline-offset: 2px; }

@media print {
	div.mainpage { animation: none; box-shadow: none; border: none; margin: 0; max-width: none; }
}

/* ====================================================================== */
/* Responsive fixes: data grids on laptops and phones                      */
/* ====================================================================== */

/* Compact grid cells so a 31-day report fits a laptop screen */
table[border]:not([border="0"]) td,
table[border]:not([border="0"]) th {
	padding: 3px 4px !important;
	font-size: 12px;
	line-height: 1.25;
}

/* Wide data grids scroll inside their own box instead of stretching the page */
table[border]:not([border="0"]) {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
table[border]:not([border="0"]) > tbody,
table[border]:not([border="0"]) > thead { display: table; }

/* Many pages carry an inline rule that turns EVERY table cell into a full-width
   block at <=820px (meant for layout tables). That wrecks data grids, so grids
   are restored here. Selectors are longer on purpose to win over that rule. */
@media (max-width: 820px) {
	html body table[border]:not([border="0"]) {
		display: block !important;
		width: auto !important;
		max-width: 100% !important;
		overflow-x: auto !important;
	}
	html body table[border]:not([border="0"]) > tbody,
	html body table[border]:not([border="0"]) > thead { display: table !important; width: auto !important; }
	html body table[border]:not([border="0"]) tr { display: table-row !important; width: auto !important; }
	html body table[border]:not([border="0"]) td,
	html body table[border]:not([border="0"]) th { display: table-cell !important; width: auto !important; }

	/* Big tap targets and no iOS zoom-on-focus */
	input[type="text"], input[type="password"], input[type="search"], input[type="email"],
	input[type="number"], input[type="date"], input[type="tel"], select, textarea { font-size: 16px; min-height: 40px; }
	input[type="submit"], input[type="button"], button { min-height: 40px; padding: 9px 16px; }

	#header { font-size: 18px; height: 46px; }
	body { font-size: 14px; }
}

/* Large screens: let report cards use the width they have */
@media (min-width: 1400px) {
	div.mainpage { max-width: 1400px; }
}