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


/* 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;
}


/* 2. Base
   ============================================================ */
html, body {
	font-family: "aglet-sans", sans-serif;
	font-weight: 400;
	color: #0d1f3c;
	background-color: #f4f6f9;
	-webkit-font-smoothing: antialiased;
}

strong { font-weight: 700; }

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

p a { color: #00BFB2; border-bottom: 1px solid rgba(0,191,178,0.3); }
p a:hover { border-bottom-color: #00BFB2; }

a { text-decoration: none; color: #0d1f3c; }
a.underline { text-decoration: underline; }


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

.app-content {
	margin-left: 220px;
	flex: 1;
	min-height: 100vh;
	background-color: #f4f6f9;
	display: flex;
	flex-direction: column;
}

.main {
	flex: 1;
	padding-bottom: 60px;
	position: relative;
}


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

body.auth-page .main {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
}

.auth-header {
	padding: 24px 40px;
	background-color: #0d1f3c;
}

.auth-header a {
	font-size: 1.4em;
	font-weight: 800;
	color: #00BFB2;
	letter-spacing: -0.5px;
}


/* 5. Sidebar
   ============================================================ */
.sidebar {
	width: 220px;
	min-height: 100vh;
	background-color: #0d1f3c;
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0; left: 0; bottom: 0;
	z-index: 100;
}

.sidebar__logo {
	padding: 24px 24px 22px;
	border-bottom: 1px solid rgba(255,255,255,0.07);
}

.sidebar__logo a {
	font-size: 1.4em;
	font-weight: 800;
	color: #00BFB2;
	letter-spacing: -0.5px;
	display: block;
}

.sidebar__nav {
	flex: 1;
	padding: 16px 0;
	overflow-y: auto;
}

.sidebar__footer {
	padding: 18px 24px;
	border-top: 1px solid rgba(255,255,255,0.07);
}

.sidebar__user {
	margin-bottom: 12px;
}

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

.sidebar__user strong {
	font-size: 13px;
	color: rgba(255,255,255,0.8);
	font-weight: 600;
}

.sidebar__logout {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	color: rgba(255,255,255,0.45);
	font-weight: 500;
	transition: color 0.15s;
}

.sidebar__logout:hover {
	color: #fff;
}


/* 6. Navigation
   ============================================================ */
.linksList {
	list-style: none;
	padding: 0;
	margin: 0;
}

.linksList a {
	display: flex;
	align-items: center;
	padding: 10px 24px;
	color: rgba(255,255,255,0.55);
	font-size: 13.5px;
	font-weight: 500;
	border-left: 3px solid transparent;
	transition: all 0.15s;
	line-height: 1.4;
}

.linksList a:hover {
	color: rgba(255,255,255,0.9);
	background-color: rgba(255,255,255,0.05);
	border-left-color: rgba(0,191,178,0.4);
}

.linksList a.active {
	color: #fff;
	font-weight: 600;
	background-color: rgba(0,191,178,0.1);
	border-left-color: #00BFB2;
}

.linksList li { display: block; }

.systemLinks {
	margin: 8px 12px;
	background-color: rgba(255,255,255,0.04);
	border-radius: 8px;
	border: 1px solid rgba(255,255,255,0.06);
}

.systemLinks a {
	padding: 9px 14px;
	border-left: none !important;
}

.systemLinks a:hover {
	border-radius: 7px;
}

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


/* 7. Message Bar
   ============================================================ */
.msgBar {
	padding: 16px 20px 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: 220px;
}

.messbox {
	background-color: #00BFB2;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	padding: 12px 24px;
	max-width: 460px;
	text-align: center;
	margin: 0 auto;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}


/* 8. Page Header
   ============================================================ */
.pageHeader {
	padding: 30px 40px 26px;
	background-color: #fff;
	border-bottom: 1px solid #e8edf2;
	box-sizing: border-box;
}

.pageHeader h1 {
	font-size: 1.45em;
	font-weight: 700;
	color: #0d1f3c;
	margin: 4px 0 0;
	line-height: 1.2;
}

.pageHeader h2 {
	font-size: 0.85em;
	font-weight: 500;
	color: #8896a9;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.headerCopy { padding-right: 0; }


/* 9. Content Box
   ============================================================ */
.contentBox {
	padding: 28px 40px;
	box-sizing: border-box;
}


/* 10. Cards & Inner Boxes
   ============================================================ */
.innerBox {
	padding: 24px;
	border-radius: 12px;
	background-color: #fff;
	box-sizing: border-box;
	margin: 12px 8px;
	border: 1px solid #e8edf2;
	box-shadow: 0 1px 4px rgba(13,31,60,0.05);
}

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

.innerBox h2 {
	font-size: 1.05em;
	font-weight: 700;
	color: #0d1f3c;
	margin-bottom: 10px;
}

.formGroup {
	border-radius: 12px;
	background-color: #fff;
	border: 1px solid #e8edf2;
	padding: 28px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(13,31,60,0.05);
}

.containerBox {
	padding: 20px 24px;
	border-radius: 12px;
	overflow: hidden;
}


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

.tableHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0 12px;
	overflow: hidden;
}

.tableHeader h2,
.tableHeader .title {
	font-size: 1.05em;
	font-weight: 700;
	color: #0d1f3c;
}

.tableHeader p { margin: 0; }


/* 12. Forms
   ============================================================ */
.field {
	position: relative;
	margin-bottom: 20px;
}

.field label,
.fieldLabel {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: #8896a9;
	text-transform: uppercase;
	letter-spacing: 0.7px;
	margin-bottom: 7px;
}

.fieldInput {
	width: 100%;
	height: 44px;
	font-size: 15px;
	font-family: "aglet-sans", sans-serif;
	font-weight: 400;
	border: 1.5px solid #dde3ea;
	border-radius: 8px;
	padding: 10px 14px;
	box-sizing: border-box;
	background-color: #f9fafb;
	color: #0d1f3c;
	transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
	-webkit-appearance: none;
	margin: 0;
}

.fieldInput:focus {
	outline: none;
	border-color: #00BFB2;
	background-color: #fff;
	box-shadow: 0 0 0 3px rgba(0,191,178,0.12);
}

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

.md-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	background-color: #f4f6f9;
	border: 1.5px solid #dde3ea;
	border-bottom: none;
	border-radius: 8px 8px 0 0;
	padding: 6px 8px;
}

.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 8px;
	font-size: 12px;
	font-family: "aglet-sans", sans-serif;
	font-weight: 600;
	color: #4a5568;
	background: #fff;
	border: 1px solid #dde3ea;
	border-radius: 5px;
	cursor: pointer;
	line-height: 1;
	transition: background-color 0.1s, border-color 0.1s, color 0.1s;
	user-select: none;
}

.md-btn:hover {
	background-color: #e8edf2;
	border-color: #b0bec5;
	color: #0d1f3c;
}

.md-btn:active {
	background-color: #dde3ea;
}

.md-toolbar-sep {
	width: 1px;
	height: 20px;
	background-color: #dde3ea;
	margin: 4px 2px;
	align-self: center;
}

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;
}


/* 13. Buttons
   ============================================================ */
button, .button {
	padding: 9px 18px;
	border-radius: 7px;
	border: 1.5px solid transparent;
	font-size: 13px;
	font-weight: 600;
	font-family: "aglet-sans", sans-serif;
	display: inline-block;
	text-align: center;
	transition: all 0.15s;
	cursor: pointer;
	line-height: 1.4;
	letter-spacing: 0.1px;
}

button span { font-weight: 700; }

.bgGreen  { background-color: #00BFB2; color: #fff; border-color: #00BFB2; }
button.bgGreen:hover, .button.bgGreen:hover { background-color: #009e93; border-color: #009e93; }

.bgGreenTrans { color: #00BFB2; border-color: #00BFB2; background-color: transparent; }
button.bgGreenTrans:hover, .button.bgGreenTrans:hover { background-color: #00BFB2; color: #fff; }

.bgRed { background-color: #e53e35; border-color: #e53e35; color: #fff; }
.bgRedTrans { border-color: #e53e35; color: #e53e35; background-color: transparent; }
button.bgRedTrans:hover, .button.bgRedTrans:hover { background-color: #e53e35; border-color: #e53e35; color: #fff; }

.bgGrey { background-color: #edf1f5; border-color: #dde3ea; color: #4a5568; }
button.bgGrey:hover, .button.bgGrey:hover { background-color: #dde3ea; }

.bgWhite { background-color: #fff; border-color: #dde3ea; color: #0d1f3c; }
.bgWhiteTrans { background-color: transparent; border-color: rgba(255,255,255,0.55); color: #fff; }
.bgWhiteTrans:hover { background-color: rgba(255,255,255,0.1); border-color: #fff; }

.bgYellow { background-color: #ffe012; border-color: #ffe012; color: #282828; }
.bgAmber  { background-color: #df9711; border-color: #df9711; color: #fff; }
.bgOtherGreen { background-color: #AEC000; border-color: #AEC000; color: #fff; }


/* 14. Tables
   ============================================================ */
.table {
	background-color: #fff;
	border-radius: 12px;
	border: 1px solid #e8edf2;
	width: 100%;
	margin-top: 20px;
	overflow: hidden;
	box-sizing: border-box;
	box-shadow: 0 1px 4px rgba(13,31,60,0.05);
	display: block;
}

.table.project-stats { display: inline-table; }
.table.project-stats tr td { padding: 10px; }

.th {
	background-color: #f8f9fc;
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: #8896a9;
	border-bottom: 1px solid #e8edf2;
	padding: 0 8px;
	overflow: hidden;
}

.tr {
	border-bottom: 1px solid #f0f3f6;
	padding: 0 8px;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	transition: background-color 0.1s;
}

.tr:last-child { border-bottom: 0; }
.tr:hover { background-color: #f8fbff; }

.cell {
	float: left;
	padding: 13px 10px;
	width: calc(100% / 5);
	box-sizing: border-box;
	font-size: 14px;
}

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

td {
	max-width: 100%;
	padding: 0 10px;
	display: inline-block;
}

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

.table-actions a {
	display: inline-block;
	margin-right: 12px;
	color: #00BFB2;
	font-size: 13px;
	font-weight: 600;
}

.table-actions a:hover { color: #0d1f3c; text-decoration: underline; }
.table-actions a:last-child { margin-right: 0; }

.rowAlert {
	background-color: #fef2f2;
	border-radius: 8px;
	border-left: 3px solid #e53e35;
}


/* 15. Status Badges
   ============================================================ */
.status-badge, .statusBadge {
	border-radius: 5px;
	padding: 3px 8px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: inline-block;
	line-height: 1.5;
}


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


/* 17. Login / Auth Styles
   ============================================================ */
.loginContainer {
	background-color: #fff;
	padding: 36px;
	border-radius: 16px;
	border: 1px solid #e8edf2;
	box-shadow: 0 4px 24px rgba(13,31,60,0.08);
	width: 100%;
	max-width: 420px;
}

.loginBox .field {
	display: flex;
	background-color: #f9fafb;
	border: 1.5px solid #dde3ea;
	border-radius: 8px;
	margin-bottom: 10px;
	font-size: 14px;
	line-height: normal;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.loginBox .field:focus-within {
	border-color: #00BFB2;
	box-shadow: 0 0 0 3px rgba(0,191,178,0.12);
}

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

.loginBox .field .field__input label {
	display: block;
	margin-bottom: 2px;
	color: #8896a9;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.7px;
	font-weight: 700;
}

.loginBox .field .field__input .fieldInput {
	display: block;
	width: 100%;
	border: 0;
	background: transparent;
	padding: 0;
	height: 26px;
	font-weight: 600;
	font-size: 17px;
	color: #0d1f3c;
	outline: none;
	box-sizing: border-box;
	box-shadow: none;
}

.loginBox .forgot-password { text-align: left; padding: 10px 0; }
.loginBox .login-button    { text-align: right; padding: 10px 0; }
.loginBox .forgot-password a { color: #8896a9; font-size: 13px; }
.loginBox button { cursor: pointer; }


/* 18. Alerts & Info Boxes
   ============================================================ */
.alertBox {
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	display: flex;
}

.alertBox .alertBox__icon {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	width: 60px;
	font-size: 3em;
	line-height: normal;
}

.alertBox .alertBox__content {
	display: flex;
	padding: 20px;
	flex-wrap: wrap;
	align-items: flex-start;
	flex-direction: column;
	width: 100%;
}

.alertBox .alertBox__title { font-size: 1.2rem; font-weight: 600; }
.alertBox a { text-decoration: underline; }


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

h1 { font-size: 1.6em; font-weight: 700; margin: 0 0 8px; }
h2 { font-size: 1.25em; font-weight: 600; }
h3 { font-size: 1.05em; font-weight: 600; }

h2.title { font-size: 1.4rem; }
h3.title { font-size: 1.1rem; }


/* 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. 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; }


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


/* 23. 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: 20px 24px; }
}

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