/* ============================================================
   FACTORA — Design System
   ============================================================ */


/* 0. Tokens
   ============================================================ */
:root {
	/* Brand */
	--brand-teal:        #00BFB2;
	--brand-teal-hover:  #00a89c;
	--brand-teal-press:  #008f85;
	--brand-teal-soft:   rgba(0, 191, 178, 0.12);
	--brand-teal-tint:   #e6f8f6;

	/* Ink */
	--ink-navy:          #0d1f3c;
	--ink-mid:           #8896a9;
	--ink-soft:          #b4bdcb;
	--ink-on-dark:       #ffffff;

	/* Surfaces */
	--surface-page:      #f4f6f9;
	--surface-card:      #ffffff;
	--surface-field:     #f9fafb;
	--surface-sidebar:   #0d1f3c;
	--surface-topbar:    #0d1f3c;
	--surface-callout:   #eef1f5;

	/* Borders */
	--border-soft:       #e8edf2;
	--border-input:      #dde3ea;
	--border-focus:      var(--brand-teal);

	/* State */
	--state-success:        #2e9e6a;
	--state-success-bg:     #e6f4ec;
	--state-success-border: #c7e7d4;
	--state-success-ink:    #1f5b40;

	--state-warning:        #b67d10;
	--state-warning-bg:     #fbf2dc;
	--state-warning-border: #f1e0b0;
	--state-warning-ink:    #6e4a08;

	--state-danger:         #c0392b;
	--state-danger-bg:      #fbe7e4;
	--state-danger-border:  #f3c8c1;
	--state-danger-ink:     #7a2018;

	--state-info:           var(--brand-teal);
	--state-info-bg:        var(--brand-teal-tint);
	--state-info-border:    rgba(0,191,178,0.25);
	--state-info-ink:       var(--brand-teal-press);

	/* Shadows */
	--shadow-card:     0 1px 2px rgba(13, 31, 60, 0.04), 0 1px 3px rgba(13, 31, 60, 0.05);
	--shadow-elevated: 0 4px 24px rgba(13, 31, 60, 0.08);
	--shadow-popover:  0 8px 32px rgba(13, 31, 60, 0.12);
	--ring-focus:      0 0 0 3px var(--brand-teal-soft);

	/* Radius */
	--r-xs:   4px;
	--r-sm:   8px;
	--r-md:   12px;
	--r-lg:   16px;
	--r-pill: 999px;

	/* Spacing (4px base) */
	--s-1:  4px;
	--s-2:  8px;
	--s-3:  12px;
	--s-4:  16px;
	--s-5:  20px;
	--s-6:  24px;
	--s-7:  28px;
	--s-8:  36px;
	--s-9:  40px;
	--s-10: 56px;
	--s-11: 72px;

	/* Layout */
	--sidebar-w:        220px;
	--auth-card-max:    560px;
	--content-pad-y:    28px;
	--content-pad-x:    40px;

	/* Type */
	--font-sans: "Prompt", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--fs-eyebrow:   12px;
	--fs-label:     11px;
	--fs-meta:      13px;
	--fs-body:      14px;
	--fs-body-lg:   15px;
	--fs-h3:        16px;
	--fs-h2:        18px;
	--fs-h1:        20px;
	--fs-display:   24px;
	--fs-tile-num:  56px;

	--fw-regular:  400;
	--fw-medium:   500;
	--fw-semibold: 600;
	--fw-bold:     700;

	/* Motion */
	--t-fast: 120ms ease;
	--t-base: 150ms ease;
	--t-slow: 240ms ease;
}


/* 1. Reset
   ============================================================ */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u,
i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video, button {
	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
*, *::before, *::after { box-sizing: border-box; }


/* 2. Base
   ============================================================ */
html, body {
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
	color: var(--ink-navy);
	background-color: var(--surface-page);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

strong { font-weight: var(--fw-bold); }

p { margin: 14px 0; line-height: 1.6; }
p:first-child { margin-top: 0; }
p:last-child  { margin-bottom: 0; }

p a { color: var(--brand-teal); border-bottom: 1px solid rgba(0,191,178,0.3); transition: border-color var(--t-base); }
p a:hover { border-bottom-color: var(--brand-teal); }

a { text-decoration: none; color: var(--ink-navy); transition: color var(--t-base); }
a.underline { text-decoration: underline; }


/* 3. App Layout (authenticated pages)
   ============================================================ */
body.app-layout {
	display: flex;
	min-height: 100vh;
	background-color: var(--surface-page);
}

.app-content {
	margin-left: var(--sidebar-w);
	flex: 1;
	min-height: 100vh;
	background-color: var(--surface-page);
	display: flex;
	flex-direction: column;
}

.main {
	flex: 1;
	padding-bottom: var(--s-10);
	position: relative;
}


/* 4. Auth Layout (login / register)
   ============================================================ */
body.auth-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: var(--surface-page);
}

body.auth-page .main {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--s-9) var(--s-5);
}

.auth-header {
	padding: var(--s-6) var(--s-9);
	background-color: var(--surface-topbar);
}

.auth-header a {
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	color: var(--brand-teal);
	letter-spacing: -0.3px;
}


/* 5. Sidebar
   ============================================================ */
.sidebar {
	width: var(--sidebar-w);
	min-height: 100vh;
	background-color: var(--surface-sidebar);
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0; left: 0; bottom: 0;
	z-index: 100;
}

.sidebar__logo {
	display: flex;
	align-items: center;
	padding: var(--s-6) var(--s-6) var(--s-5);
}

.sidebar__logo a {
	font-size: 19px;
	font-weight: var(--fw-bold);
	color: var(--brand-teal);
	letter-spacing: -0.3px;
	display: block;
}

.sidebar__nav {
	flex: 1;
	padding: var(--s-3) var(--s-3);
	overflow-y: auto;
}

.sidebar__footer {
	padding: var(--s-4) var(--s-6) var(--s-5);
	border-top: 1px solid rgba(255,255,255,0.07);
}

.sidebar__user {
	display: block;
	margin-bottom: var(--s-3);
	padding: 6px 8px;
	border-radius: var(--r-sm);
	transition: background var(--t-base);
}

.sidebar__user:hover {
	background: rgba(255,255,255,0.05);
}

.sidebar__user span {
	display: block;
	font-size: 10px;
	font-weight: var(--fw-bold);
	color: rgba(255,255,255,0.35);
	text-transform: uppercase;
	letter-spacing: 0.7px;
	margin-bottom: 3px;
}

.sidebar__user strong {
	font-size: var(--fs-meta);
	color: rgba(255,255,255,0.85);
	font-weight: var(--fw-semibold);
}

.sidebar__logout {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--fs-meta);
	color: rgba(255,255,255,0.55);
	font-weight: var(--fw-medium);
	transition: color var(--t-base);
}

.sidebar__logout:hover { color: #fff; }


/* 6. Navigation
   ============================================================ */
.linksList {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--s-3);
}

.linksList a {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding: 9px var(--s-3);
	margin: 1px 0;
	border-radius: var(--r-sm);
	color: rgba(255,255,255,0.75);
	font-size: var(--fs-body);
	font-weight: var(--fw-medium);
	line-height: 1;
	transition: background var(--t-base), color var(--t-base);
}

.linksList a .nav-label { display: inline-block; line-height: 1; }

.linksList a:hover {
	color: #fff;
	background-color: rgba(255,255,255,0.05);
}

.linksList a.active {
	color: var(--brand-teal);
	background-color: rgba(0,191,178,0.16);
	font-weight: var(--fw-semibold);
}

.linksList li { display: block; }

.linksList .nav-icon {
	display: inline-flex;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	color: currentColor;
}

.linksList .nav-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.systemLinks {
	margin-top: var(--s-4);
	padding-top: var(--s-3);
	border-top: 1px solid rgba(255,255,255,0.07);
}

/* hide old menu toggle elements */
.menuBox     { display: none !important; }
.menuButton  { display: none !important; }


/* 7. Message Bar
   ============================================================ */
.msgBar {
	padding: var(--s-4) var(--s-5) 0;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 9999;
	display: none;
	position: fixed;
	box-sizing: border-box;
	pointer-events: none;
}

body.app-layout .msgBar { left: var(--sidebar-w); }

.messbox {
	background-color: var(--brand-teal);
	color: #fff;
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	padding: var(--s-3) var(--s-6);
	max-width: 460px;
	text-align: center;
	margin: 0 auto;
	border-radius: var(--r-sm);
	box-shadow: var(--shadow-popover);
}


/* 8. Page Header
   ============================================================ */
.pageHeader {
	padding: var(--s-7) var(--content-pad-x);
	background-color: var(--surface-card);
	border-bottom: 1px solid var(--border-soft);
}

.pageHeader h1 {
	font-size: var(--fs-display);
	font-weight: var(--fw-bold);
	color: var(--ink-navy);
	margin: 4px 0 0;
	line-height: 1.2;
	letter-spacing: -0.2px;
}

.pageHeader h2 {
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-medium);
	color: var(--ink-mid);
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.headerCopy { padding-right: 0; }


/* 9. Content Box
   ============================================================ */
.contentBox {
	padding: var(--s-7) var(--content-pad-x);
}


/* 10. Cards & Inner Boxes
   ============================================================ */
.innerBox {
	padding: var(--s-6);
	border-radius: var(--r-md);
	background-color: var(--surface-card);
	margin: var(--s-3) var(--s-2);
	border: 1px solid var(--border-soft);
	box-shadow: var(--shadow-card);
}

.oneHalf.innerBox { width: calc(50% - 20px); }

.innerBox h2 {
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	color: var(--ink-navy);
	margin-bottom: var(--s-3);
}

.formGroup {
	border-radius: var(--r-md);
	background-color: var(--surface-card);
	border: 1px solid var(--border-soft);
	padding: var(--s-7);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.containerBox {
	padding: var(--s-5) var(--s-6);
	border-radius: var(--r-md);
	background-color: var(--surface-callout);
	overflow: hidden;
}

.containerBox.bgGreen   { background-color: var(--state-success-bg); color: var(--state-success-ink); }
.containerBox.bgAmber   { background-color: var(--state-warning-bg); color: var(--state-warning-ink); }
.containerBox.bgRed     { background-color: var(--state-danger-bg);  color: var(--state-danger-ink); }
.containerBox.bgGrey    { background-color: var(--surface-callout);  color: var(--ink-navy); }


/* 11. Table Box Title / Section Headers
   ============================================================ */
.boxTitle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: var(--s-4);
	overflow: hidden;
}

.tableHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--s-4) 0 var(--s-3);
	overflow: hidden;
}

.tableHeader h2,
.tableHeader .title {
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	color: var(--ink-navy);
}

.tableHeader p { margin: 0; }


/* 12. Forms
   ============================================================ */
.field {
	position: relative;
	margin-bottom: var(--s-5);
}

.field label,
.fieldLabel {
	display: block;
	font-size: var(--fs-label);
	font-weight: var(--fw-bold);
	color: var(--ink-mid);
	text-transform: uppercase;
	letter-spacing: 0.7px;
	margin-bottom: 7px;
}

.fieldInput {
	width: 100%;
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
	color: var(--ink-navy);
	background-color: var(--surface-card);
	border: 1px solid var(--border-input);
	border-radius: var(--r-sm);
	padding: 12px 14px;
	-webkit-appearance: none;
	transition: border-color var(--t-base), box-shadow var(--t-base);
}

.fieldInput:focus {
	outline: none;
	border-color: var(--border-focus);
	box-shadow: var(--ring-focus);
}

textarea.fieldInput {
	min-height: 140px;
	resize: vertical;
	line-height: 1.55;
}

select.fieldInput {
	background-image: url(/assets/images/select.png);
	background-position: center right 14px;
	background-repeat: no-repeat;
	background-size: 16px;
	padding-right: 44px;
	cursor: pointer;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.md-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-1);
	background-color: var(--surface-card);
	border: 1px solid var(--border-input);
	border-bottom: none;
	border-radius: var(--r-sm) var(--r-sm) 0 0;
	padding: 6px var(--s-2);
}

.md-toolbar + textarea.fieldInput {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.md-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	min-width: 28px;
	padding: 0 var(--s-2);
	font-size: var(--fs-meta);
	font-family: var(--font-sans);
	font-weight: var(--fw-medium);
	color: var(--ink-navy);
	background: transparent;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	line-height: 1;
	transition: background-color var(--t-base);
	user-select: none;
}

.md-btn:hover { background-color: var(--surface-field); }
.md-btn:active { background-color: var(--border-soft); }

.md-toolbar-sep {
	width: 1px;
	height: 18px;
	background-color: var(--border-soft);
	margin: 4px var(--s-1);
	align-self: center;
}

.checkList label { font-size: var(--fs-body); color: var(--ink-navy); cursor: pointer; }
.checkList input { margin-right: var(--s-2); accent-color: var(--brand-teal); }


/* 13. Buttons
   ============================================================ */
button, .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-1);
	padding: 10px 18px;
	border-radius: var(--r-pill);
	border: none;
	font-family: var(--font-sans);
	font-size: var(--fs-meta);
	font-weight: var(--fw-bold);
	letter-spacing: 0.1px;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--t-base), color var(--t-base), box-shadow var(--t-base);
}

button:focus-visible, .button:focus-visible {
	outline: none;
	box-shadow: var(--ring-focus);
}

button strong, .button strong { font-weight: var(--fw-bold); }

.bgGreen  { background-color: var(--brand-teal); color: #fff; }
.bgGreen:hover  { background-color: var(--brand-teal-hover); }
.bgGreen:active { background-color: var(--brand-teal-press); }

.bgGreenTrans  { background-color: var(--brand-teal-soft); color: var(--brand-teal-press); }
.bgGreenTrans:hover  { background-color: rgba(0,191,178,0.22); }
.bgGreenTrans:active { background-color: rgba(0,191,178,0.30); }

.bgRed       { background-color: var(--state-danger); color: #fff; }
.bgRed:hover { background-color: #a83121; }

.bgRedTrans       { background-color: rgba(192,57,43,0.12); color: var(--state-danger-ink); }
.bgRedTrans:hover { background-color: rgba(192,57,43,0.2); }

.bgGrey       { background-color: var(--surface-callout); color: var(--ink-navy); }
.bgGrey:hover { background-color: var(--border-soft); }

.bgWhite          { background-color: #fff; color: var(--ink-navy); border: 1px solid var(--border-input); }
.bgWhiteTrans     { background-color: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.55); }
.bgWhiteTrans:hover { background-color: rgba(255,255,255,0.1); border-color: #fff; }

.bgYellow     { background-color: #ffe012; color: #282828; }
.bgAmber      { background-color: var(--state-warning); color: #fff; }
.bgOtherGreen { background-color: #AEC000; color: #fff; }

.button.sm, .sm.button, button.sm { padding: 8px 14px; font-size: 12px; }


/* 14. Tables
   ============================================================ */
.table {
	background-color: var(--surface-card);
	border-radius: var(--r-md);
	border: 1px solid var(--border-soft);
	margin-top: var(--s-5);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.table.project-stats { display: inline-table; }
.table.project-stats tr td { padding: var(--s-3); }

.th {
	background-color: var(--surface-field);
	font-weight: var(--fw-bold);
	font-size: var(--fs-label);
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--ink-mid);
	border-bottom: 1px solid var(--border-soft);
	padding: 0 var(--s-2);
	overflow: hidden;
}

.tr {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--border-soft);
	padding: 0 var(--s-6);
	transition: background-color var(--t-base);
}

.tr:last-child { border-bottom: 0; }
.tr:hover { background-color: var(--surface-field); }

.cell {
	padding: 14px var(--s-3);
	font-size: var(--fs-body);
}

.cell a { color: var(--ink-navy); font-weight: var(--fw-medium); }
.cell a:hover { color: var(--brand-teal); }

.cell .button {
	padding: 6px 12px;
	margin: 0 3px;
	font-size: 12px;
}

td {
	max-width: 100%;
	padding: 0 var(--s-3);
	display: inline-block;
}

td.--full-width { width: 100%; }

.table-actions a {
	display: inline-block;
	margin-right: var(--s-3);
	color: var(--brand-teal);
	font-size: var(--fs-meta);
	font-weight: var(--fw-semibold);
}

.table-actions a:hover { color: var(--ink-navy); text-decoration: underline; }
.table-actions a:last-child { margin-right: 0; }

.rowAlert {
	background-color: var(--state-danger-bg);
	border-radius: var(--r-sm);
	border-left: 3px solid var(--state-danger);
}


/* 15. Status Badges
   ============================================================ */
.status-badge, .statusBadge {
	display: inline-block;
	padding: 5px 11px;
	border-radius: var(--r-pill);
	font-size: var(--fs-label);
	font-weight: var(--fw-bold);
	letter-spacing: 0.6px;
	text-transform: uppercase;
	line-height: 1.4;
}

.statusBadge.bgGreen { background: var(--state-success-bg); color: var(--state-success-ink); }
.statusBadge.bgAmber { background: var(--state-warning-bg); color: var(--state-warning-ink); }
.statusBadge.bgRed   { background: var(--state-danger-bg);  color: var(--state-danger-ink); }
.statusBadge.bgGrey  { background: var(--surface-callout);  color: #4a5568; }


/* 15b. Account section nav
   ============================================================ */
.accountNav {
	display: flex;
	gap: var(--s-1);
	flex-wrap: wrap;
	border-bottom: 1px solid var(--border-soft);
	margin-bottom: var(--s-6);
}

.accountNav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-4);
	font-size: var(--fs-body);
	font-weight: var(--fw-medium);
	color: var(--ink-mid);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color var(--t-base), border-color var(--t-base);
}

.accountNav__link:hover { color: var(--ink-navy); }

.accountNav__link.is-active {
	color: var(--brand-teal);
	border-bottom-color: var(--brand-teal);
	font-weight: var(--fw-semibold);
}

.accountNav__link.is-soon { color: var(--ink-soft); cursor: not-allowed; }
.accountNav__link.is-soon:hover { color: var(--ink-soft); }

.accountNav__chip {
	font-size: 9px;
	font-weight: var(--fw-bold);
	letter-spacing: 0.6px;
	text-transform: uppercase;
	padding: 2px 6px;
	border-radius: var(--r-pill);
	background: var(--surface-callout);
	color: var(--ink-mid);
}


/* 15c. Beginner help overlay
   ============================================================ */
.helpBox {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	margin: var(--s-6) var(--content-pad-x);
	padding: var(--s-4) var(--s-5);
	background: var(--brand-teal-tint);
	border: 1px solid rgba(0,191,178,0.25);
	border-radius: var(--r-md);
	position: relative;
}

.helpBox__icon {
	color: var(--brand-teal-press);
	flex-shrink: 0;
	margin-top: 1px;
	display: inline-flex;
}

.helpBox__title {
	font-weight: var(--fw-bold);
	color: var(--ink-navy);
	font-size: var(--fs-body);
	margin-bottom: 3px;
}

.helpBox__text {
	font-size: var(--fs-meta);
	color: var(--ink-navy);
	line-height: 1.55;
}

.helpBox__text strong { font-weight: var(--fw-semibold); }

.helpBox__foot {
	margin-top: var(--s-3);
	font-size: 12px;
	color: var(--ink-mid);
}

.helpBox__foot strong { font-weight: var(--fw-semibold); color: var(--brand-teal-press); }

/* Sidebar toggle */
.sidebar__help {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--fs-meta);
	color: rgba(255,255,255,0.55);
	font-weight: var(--fw-medium);
	margin-bottom: var(--s-3);
	transition: color var(--t-base);
}

.sidebar__help:hover { color: #fff; }

.sidebar__help .nav-icon svg { width: 16px; height: 16px; }

.sidebar__help-state {
	margin-left: auto;
	font-size: 10px;
	font-weight: var(--fw-bold);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding: 2px 7px;
	border-radius: var(--r-pill);
	background: rgba(255,255,255,0.12);
	color: rgba(255,255,255,0.6);
}

.sidebar__help-state.is-on {
	background: var(--brand-teal);
	color: #07261f;
}

@media (max-width: 820px) {
	.helpBox { margin-left: var(--s-6); margin-right: var(--s-6); }
}


/* 15c2. Admin editing banner
   ============================================================ */
.adminBanner {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin: var(--s-6) var(--content-pad-x);
	padding: var(--s-3) var(--s-4);
	background: var(--state-warning-bg);
	border: 1px solid var(--state-warning-border);
	border-radius: var(--r-md);
	color: var(--ink-navy);
	font-size: var(--fs-body);
}

.adminBanner__tag {
	flex-shrink: 0;
	font-size: 10px;
	font-weight: var(--fw-bold);
	letter-spacing: 0.7px;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: var(--r-pill);
	background: var(--state-warning);
	color: #fff;
}

@media (max-width: 820px) {
	.adminBanner { margin-left: var(--s-6); margin-right: var(--s-6); }
}


/* 15d. Metadata UI (content meta + tags)
   ============================================================ */

/* Entry form: content sections (2/3) beside the boxed meta column (1/3).
   Content sections stay uncontained — they're part of the main content flow. */
.entryCols {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--s-6);
	align-items: start;
}
.entryCols__col > .field:last-child { margin-bottom: 0; }

.entryCols__col--boxed {
	background: var(--surface-field);
	border: 1px solid var(--border-soft);
	border-radius: var(--r-md);
	padding: var(--s-5);
}

@media (max-width: 900px) {
	.entryCols { grid-template-columns: 1fr; gap: var(--s-5); }
}

.fieldHint {
	font-size: var(--fs-meta);
	color: var(--ink-mid);
	margin: -2px 0 12px;
	line-height: 1.5;
}

.metaItem {
	border: 1px solid var(--border-soft);
	border-radius: var(--r-sm);
	background: var(--surface-field);
	padding: 12px;
	margin-bottom: 10px;
}
.metaItem__head {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}
.metaItem__title { flex: 1; }
.metaItem__label {
	flex: 1;
	align-self: center;
	font-weight: var(--fw-semibold);
	color: var(--ink-navy);
	font-size: 15px;
}
.metaItem__head .button { flex-shrink: 0; }

.metaAdd { display: flex; gap: 8px; align-items: center; }
.metaAdd .fieldInput { flex: 1; }
.metaAdd .button { flex-shrink: 0; white-space: nowrap; }

/* Tag chips input */
.tagField {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	border: 1.5px solid var(--border-input);
	border-radius: var(--r-sm);
	background: #fff;
	padding: 8px 10px;
	cursor: text;
	transition: border-color var(--t-base), box-shadow var(--t-base);
}
.tagField:focus-within {
	border-color: var(--brand-teal);
	box-shadow: 0 0 0 3px rgba(0,191,178,0.12);
}
.tagChips { display: contents; }
.tagChip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--brand-teal-tint);
	color: var(--brand-teal-press);
	border-radius: var(--r-pill);
	padding: 4px 4px 4px 12px;
	font-size: 13px;
	font-weight: var(--fw-semibold);
}
.tagChip__x {
	border: none;
	background: transparent;
	color: var(--brand-teal-press);
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	padding: 0 4px;
	border-radius: var(--r-pill);
}
.tagChip__x:hover { background: rgba(0,143,133,0.15); }
.tagInput {
	flex: 1;
	min-width: 140px;
	border: none;
	outline: none;
	background: transparent;
	font: inherit;
	color: var(--ink-navy);
	padding: 4px 2px;
}

/* Meta management rows */
.metaSection { margin-bottom: 28px; }
.metaSection h2 {
	font-size: 1.05em;
	font-weight: var(--fw-bold);
	color: var(--ink-navy);
	margin-bottom: 4px;
}
.metaRow {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 8px;
}
.metaRow .fieldInput { flex: 1; max-width: 440px; margin: 0; }
.metaRow .metaName { flex: 1; max-width: 440px; font-weight: var(--fw-medium); color: var(--ink-navy); }
.metaRow .button { flex-shrink: 0; }
.metaRow.is-hidden { opacity: 0.55; }


/* 16. Indentation (content hierarchy)
   ============================================================ */
.indent0 { padding-left: 0; }
.indent1 { padding-left: 20px; }
.indent2 { padding-left: 40px; }
.indent3 { padding-left: 60px; }
.indent4 { padding-left: 80px; }


/* 17. Login / Auth Styles
   ============================================================ */
.loginContainer {
	background-color: var(--surface-card);
	padding: 36px 44px;
	border-radius: var(--r-lg);
	border: 1px solid var(--border-soft);
	box-shadow: var(--shadow-elevated);
	width: 100%;
}

.loginBox .field {
	display: flex;
	background-color: var(--surface-field);
	border: 1.5px solid var(--border-input);
	border-radius: var(--r-sm);
	margin-bottom: var(--s-4);
	font-size: var(--fs-body);
	line-height: normal;
	transition: border-color var(--t-base), box-shadow var(--t-base);
}

.loginBox .field:focus-within {
	border-color: var(--brand-teal);
	box-shadow: var(--ring-focus);
}

.loginBox .field .field__input {
	width: 100%;
	padding: 12px 14px;
}

.loginBox .field .field__input label {
	display: block;
	margin-bottom: 2px;
	color: var(--ink-mid);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.7px;
	font-weight: var(--fw-bold);
}

.loginBox .field .field__input .fieldInput {
	display: block;
	width: 100%;
	border: 0;
	background: transparent;
	padding: 0;
	height: 26px;
	font-weight: var(--fw-semibold);
	font-size: 16px;
	color: var(--ink-navy);
	outline: none;
	box-shadow: none;
}

.loginBox button { cursor: pointer; }

.loginBox .loginActions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	margin-top: var(--s-5);
}

.loginBox .forgotLink {
	color: var(--ink-mid);
	font-size: var(--fs-meta);
}

.loginBox .forgotLink:hover { color: var(--brand-teal); }

body.auth-page .contentBox.loginBox {
	width: 100%;
	max-width: var(--auth-card-max);
}

body.auth-page .loginBox .twoThirds,
body.auth-page .loginBox .oneHalf {
	width: 100%;
	float: none;
}

body.auth-page .pageHeader {
	background-color: transparent;
	border-bottom: 0;
	text-align: center;
	padding: 0 0 var(--s-4);
}


/* 18. Alerts & Info Boxes
   ============================================================ */
.alertBox {
	display: flex;
	border-radius: var(--r-md);
	overflow: hidden;
	border: 1px solid var(--border-soft);
	margin-bottom: var(--s-4);
}

.alertBox .alertBox__icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60px;
	flex: 0 0 60px;
	color: #fff;
}

.alertBox .alertBox__icon svg { width: 28px; height: 28px; }

.alertBox .alertBox__content {
	display: flex;
	padding: var(--s-3) var(--s-4);
	align-items: flex-start;
	flex-direction: column;
	width: 100%;
}

.alertBox .alertBox__title { font-size: var(--fs-body); font-weight: var(--fw-bold); }
.alertBox .alertBox__text  { font-size: var(--fs-meta); opacity: 0.9; margin-top: 2px; }
.alertBox a { text-decoration: underline; }

.alertBox.is-success  { background: var(--state-success-bg); border-color: var(--state-success-border); color: var(--state-success-ink); }
.alertBox.is-success .alertBox__icon { background: var(--state-success); }

.alertBox.is-warning  { background: var(--state-warning-bg); border-color: var(--state-warning-border); color: var(--state-warning-ink); }
.alertBox.is-warning .alertBox__icon { background: var(--state-warning); }

.alertBox.is-danger   { background: var(--state-danger-bg); border-color: var(--state-danger-border); color: var(--state-danger-ink); }
.alertBox.is-danger .alertBox__icon { background: var(--state-danger); }

.alertBox.is-info     { background: var(--state-info-bg); border-color: var(--state-info-border); color: var(--state-info-ink); }
.alertBox.is-info .alertBox__icon { background: var(--brand-teal); }


/* 19. Typography
   ============================================================ */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); line-height: 1.3; }

h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); margin: 0 0 var(--s-2); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }

h2.title { font-size: var(--fs-h2); }
h3.title { font-size: var(--fs-h3); }


/* 20. Layout Grid
   ============================================================ */
.fullWidth    { width: 100%; float: left; }
.halfWidth,
.oneHalf      { width: calc(100% / 2); float: left; }
.oneThird     { width: calc(100% / 3); float: left; }
.twoThirds    { width: calc((100% / 3) * 2); float: left; }
.quarterWidth { width: 25%; float: left; }
.oneFifth     { width: 20%; float: left; }
.twoFifths    { width: 40%; float: left; }
.threeFifths  { width: 60%; float: left; }
.fourFifths   { width: 80%; float: left; }

.formGroup .oneFifth    { width: calc((100% / 5) - 20px); float: left; margin: 0 10px; }
.formGroup .twoFifths   { width: calc(((100% / 5) * 2) - 20px); float: left; margin: 0 10px; }
.formGroup .threeFifths { width: calc(((100% / 5) * 3) - 20px); float: left; margin: 0 10px; }
.formGroup .fourFifths  { width: calc(((100% / 5) * 4) - 20px); float: left; margin: 0 10px; }


/* 21. Count Tile (dashboard)
   ============================================================ */
.containerBox.countTile {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-3);
	background-color: var(--surface-callout);
	border-radius: var(--r-lg);
	padding: 22px 30px 24px;
	width: 240px;
	text-align: center;
	margin: 0 var(--s-3) var(--s-3) 0;
}

.countTile .countTile__cap    { font-size: var(--fs-meta); color: var(--ink-mid); margin: 0; }
.countTile .countTile__number {
	width: 120px; height: 120px;
	background: var(--surface-card);
	border-radius: var(--r-pill);
	display: flex; align-items: center; justify-content: center;
	font-size: var(--fs-tile-num);
	font-weight: var(--fw-bold);
	color: var(--ink-navy);
	line-height: 1;
}
.countTile .countTile__label  { font-size: var(--fs-body); color: var(--ink-navy); font-weight: var(--fw-semibold); }


/* 22. Utility Classes
   ============================================================ */
.float-left  { float: left !important; }
.float-right { float: right !important; }
.text-left   { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }
.overflow-visible { overflow: visible !important; }


/* 23. 404
   ============================================================ */
.four-oh-four {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}


/* 24. Responsive
   ============================================================ */
@media screen and (max-width: 900px) {
	.sidebar { width: 200px; }
	.app-content { margin-left: 200px; }
	body.app-layout .msgBar { left: 200px; }

	.oneThird, .twoThirds, .oneFifth, .twoFifths,
	.threeFifths, .fourFifths, .halfWidth, .oneHalf {
		width: 100%;
	}

	.pageHeader, .contentBox { padding: var(--s-5) var(--s-6); }
}

@media screen and (max-width: 640px) {
	.sidebar { display: none; }
	.app-content { margin-left: 0; }
	body.app-layout .msgBar { left: 0; }
}