/* FONT INSTALL */
/* ============ */

@font-face {
  font-family:'robotoregular';
  src: url('../fonts/roboto-webfont.eot');
  src: url('../fonts/roboto-webfont.eot?#iefix') format('embedded-opentype'),
      url('../fonts/roboto-webfont.woff2') format('woff2'),
      url('../fonts/roboto-webfont.woff') format('woff'),
      url('../fonts/roboto-webfont.ttf') format('truetype'),
      url('../fonts/roboto-webfont.svg#robotoregular') format('svg');
  font-weight:normal;
  font-style:normal;
}


/* GLOBAL STRUCTURE */
/* ================ */

*,
*::before,
*::after{
  padding:0;
  margin:0;
  box-sizing:border-box;
}

:root{
  --sidebar-width:370px;
  --sidebar-width-compact:88px;
	--sidebar-color:#1a222b;
	--sidebar-icon-color:rgba(255,255,255,.68);
	--sidebar-text-color:rgba(255,255,255,.82);
	--sidebar-border-color:rgba(255,255,255,.12);
	--sidebar-hover:rgba(255,255,255,.144);

	--white:#fff;
	--black:#000;

	--main-bg:#f4f6f5;
	--topbar-bg:#dfe3e0;
	--box-bg:#fff;
	--box-border-color:#b7b8b6;
	--box-shadow:rgba(0,0,0,0.18);
	--input-bg:#f9fafb;

	--primary-color:#589837;
	--dark-primary-color:#3F6B28;
	--light-primary-color:#8ecb68;
	--lighter-primary-color:#e7f5e0;
	--hover-color:#f5fef1;

	--title-color:#1a222b;
	--light-text-color:#6b7280;
	--icon-color:rgba(17, 24, 39, 0.96);

	--highlight-search-color:#fff176;

	--success-dark:#566f49;
	--success-light:#cbe3bd;
	--error-dark:#c4161c;
	--error-light:#e2b3af;
	--error-input-bg:#fef2f2;
	--warning-dark:#88641e;
	--warning-light:#EDE797;
	--info-dark:#276094;
	--info-light:#ceeaf7;

	--box-radius:10px;
	--inner-box-radius:8px;
	--element-radius:4px;
}

html{
  height:100%;
}

body{
  height:100%;
  width:100%;
  margin:0;
  text-align:left;
  background-color:var(--main-bg);
	font-family: Arial, sans-serif;
  font-family:'robotoregular', serif;
}

main{
  min-height:100vh;
  display:flex;
	flex-direction:row;
  align-items:stretch;
}

/* Navigation */
#sidebar{
  position:fixed;
  top:0;
  left:0;
  width:var(--sidebar-width);
  min-width:var(--sidebar-width);
  height:100vh;
  background:linear-gradient(180deg, #1a222b 0%, #11181f 100%);
  color:var(--white);
  display:flex;
  flex-direction:column;
  box-shadow:4px 0 18px var(--box-shadow);
  overflow-y:auto;
  z-index:1001;
  transition:width .3s ease, transform .3s ease;
}

/* Navigation scrollbar */
/* Firefox */
#sidebar{
  scrollbar-color:#888  #1a222b;
}

/* Chrome, Safari, Edge */
#sidebar::-webkit-scrollbar {
  width:10px;
}

#sidebar::-webkit-scrollbar-track {
  background:#1a222b;
}

#sidebar::-webkit-scrollbar-thumb {
  background:#888;
  border-radius:999px;
}


/* Div to display page's content */
#admin_wrapper{
	flex:1;
  min-width:0;
  margin-left:var(--sidebar-width);
  display:flex;
  flex-direction:column;
  width:calc(100% - var(--sidebar-width));
  transition:margin-left .3s ease, width .3s ease;
}

#container{
	flex:1;
  width:100%;
	display:flex;
	flex-direction:column;
}
  
#content{
  width:90%;
  margin:0 auto;
	display:flex;
  flex-direction:column;
}

footer{
  color:#777;
  font-size:14px;
  height:30px;
  text-align:center;
  vertical-align:middle;
}
  
footer a:link,
footer a:active,
footer a:focus,
footer a:visited{
  color:var(--primary-color);
  font-weight:bold;
  text-decoration:none;
}
  
footer a:hover{
  text-decoration:underline;
}


/* GLOBAL ELEMENTS */
/* =============== */

h2{
  color:var(--title-color);
}

.box-style{
	background-color:var(--box-bg);
	border:1px solid var(--box-border-color);
	border-radius:var(--box-radius);
	overflow:hidden;
}

.light-text{
	color:var(--light-text-color);
}


/* SEARCH RESULTS */
/* ============== */
mark.search-highlight {
  background-color:var(--highlight-search-color);
  color:inherit;
  border-radius:2px;
  padding:0 1px;
}


/* STAT ELEMENTS */
/* ============== */

.stat-box{
	padding:10px 25px;
	display:flex;
	flex-direction:column;
}

.stat-nbr{
	font-size:32px;
	color:var(--primary-color);
	font-weight:700;
}


/* TABLE ELEMENTS */
/* ============== */

.table-wrap{
  overflow:auto;
  border:1px solid var(--box-border-color);
  border-radius:var(--box-radius);
  background-color:var(--box-bg);
}

.table-wrap table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

.table-wrap table th{
  background-color:var(--topbar-bg);
}

.table-wrap table th,
.table-wrap table td{
  padding:8px;
  border-bottom:1px solid var(--box-border-color);
  border-right:1px solid var(--box-border-color);
  text-align:center;
  vertical-align:middle;
}

.table-wrap table th:last-child,
.table-wrap table td:last-child{
  border-right:none;
}

.table-wrap table tr:last-child td{
  border-bottom:none;
}

.table-wrap table tr:hover td{
  background-color:var(--hover-color);
}

.table-wrap .icon{
	color:rgba(17, 24, 39, 0.96);
	width:24px;
	height:24px;
	cursor:pointer;
	opacity:.6;
}

.table-wrap .icon:hover{
	opacity:1;
	scale:1.1;
}


/* Dashboard tables */
.table-dashboard{
	flex:1 1 100%;
	overflow:auto;
}

.table-dashboard table{
	color:var(--light-text-color);
	text-align:center;
	border-collapse:collapse;
	width:100%;
}

.table-dashboard table thead th{
	background-color:var(--topbar-bg);
	color:var(--light-text-color);
	padding:15px;
}

.table-dashboard table tr td{
	border-bottom:1px solid var(--box-border-color);
	padding:6px;
	vertical-align:middle;
}

.table-dashboard .icon{
	color:var(--icon-color);
	width:24px;
	height:24px;
	cursor:pointer;
	opacity:.6;
}

.table-dashboard .icon:hover{
	opacity:1;
	scale:1.1;
}



/* FORM ELEMENTS */
/* ============= */

.input-style,
.input-style-error{
	border-radius:var(--element-radius);
	box-sizing:border-box;
	font-size:16px;
	outline:none;
	transition:0.2s ease;
	padding:5px;
}

.select-style,
.select-style-error{
	appearance:none;
		-webkit-appearance:none;
		-moz-appearance:none;
	border-radius:var(--element-radius);
	box-sizing:border-box;
	font-size:16px;
	outline:none;
	transition:0.2s ease;
	padding:5px;
	padding-right:30px;
	cursor:pointer;
}

.input-style,
.select-style{
	border:1px solid var(--box-border-color);
	background-color:var(--input-bg);
}

.input-style-error,
.select-style-error{
	border:1px solid var(--error-dark);
	background-color:var(--error-input-bg);
}

.input-style:focus,
.select-style:focus{
	background-color:var(--white);
	border-color:var(--primary-color);
	box-shadow:0 0 0 4px rgba(92, 157, 58, 0.12);
}

.input-style-error:focus,
.select-style-error:focus{
	background-color:var(--white);
	border-color:var(--error-dark);
	box-shadow:0 0 0 4px rgba(191, 66, 66, 0.12);
}

.select-style{
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24' width='24' viewBox='0 0 24 24' fill='%23589837'><path d='M5 7l5 5 5-5z'/></svg>");
	background-repeat:no-repeat;
	background-position:right 0px top 2px;
	background-size:30px;
}

.select-style-error{
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24' width='24' viewBox='0 0 24 24' fill='%23cc0000'><path d='M5 7l5 5 5-5z'/></svg>");
	background-repeat:no-repeat;
	background-position:right 8px center;
	background-size:16px;
}

/* Checkboxes */

/* Structure:
	<span class="check-toggle">
		<input type="checkbox" />
		<span class="fake-check"></span>
		<span class="feedback-slot"></span>
	</span> */

.check-toggle{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.check-toggle input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.fake-check{
  width:22px;
  height:22px;
	border-radius:var(--element-radius);
  border:1px solid var(--box-border-color);
  background-color:var(--input-bg);
  display:inline-block;
  position:relative;
}

.check-toggle input:checked + .fake-check::after{
  content:"✓";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:14px;
  font-weight:bold;
}

.check-toggle.is-locked .fake-check{
  background-color:var(--error-input-bg);
  border-color:var(--error-dark);
}

.check-toggle.is-disabled{
  cursor:not-allowed;
  opacity:0.65;
}



/* BUTTON ELEMENTS */
/* =============== */

.submit-btn{
	border-radius:var(--element-radius);
	background-color:var(--primary-color);
	border-top:none;
	border-bottom:3px solid var(--dark-primary-color);
  border-left:1px solid var(--dark-primary-color);
  border-right:1px solid var(--dark-primary-color);
	color:var(--white);
	font-size:16px;
	font-weight:700;
	cursor:pointer;
	transition:transform 0.15s ease, box-shadow 0.15s ease;
	padding:10px 15px;
	box-sizing:border-box;
}

.secundary-btn{
	border-radius:var(--element-radius);
	background-color:var(--white);
	border-top:1px solid var(--dark-primary-color);
	border-bottom:3px solid var(--dark-primary-color);
  border-left:1px solid var(--dark-primary-color);
  border-right:1px solid var(--dark-primary-color);
	color:var(--primary-color);
	font-size:16px;
	font-weight:700;
	cursor:pointer;
	transition:transform 0.15s ease, box-shadow 0.15s ease;
	padding:10px;
	box-sizing:border-box;
}

.submit-btn:hover,
.secundary-btn:hover{
	transform:translateY(-1px);
}

.submit-btn:active,
.secundary-btn:active{
	transform:translateY(0);
	background-color:var(--dark-primary-color);
  border-bottom:3px solid var(--primary-color);
  border-left:1px solid var(--primary-color);
  border-right:1px solid var(--primary-color);
}

.secundary-btn:active{
	color:var(--white);
}

.submit-link{
	color:var(--primary-color);
	text-decoration:none;
}

.submit-link:hover{
	text-decoration:underline;
}

.submit-btn .submit-link,
.secundary-btn .submit-link{
	text-decoration:none;
}

/* Back-btn */
#back_link{
	overflow:hidden;
	display:inline-flex;
	align-items:center;
	width:fit-content;
	color:var(--white);
	text-decoration:none;
	padding:0;
	padding:4px 25px 4px 10px;
	font-weight:normal;
	margin-bottom:25px;
}

#back_link .icon{
	width:24px;
	height:24px;
	margin-left:10px;
}

#back_link:hover .icon{
	transform:translateX(-10px);
	transition:transform 0.3s ease;
}



/* TOOLTIP ELEMENTS */
/* ================ */

.tooltip {
  position:fixed;
  z-index:9999;
  background:rgba(17, 24, 39, 0.96);
  color:var(--white);
  padding:6px 10px;
  border-radius:var(--box-radius);
  font-size:14px;
  line-height:1.3;
  max-width:min(250px, 90vw);
  text-align:center;
  pointer-events:none;
  opacity:0;
  transform:translateY(5px);
  transition:opacity 0.15s ease, transform 0.15s ease;
}

.tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}



/* (UN)DISPLAY CONTENT ON SMALL DEVICES */
/* ==================================== */

#display_content_toggle{
	display:none;
}

#display_content_toggle button{
	border:none;
	background-color:transparent;
	font-size:16px;
}
	
.displayContentToggle{
	width:24px;
	height:24px;
	color:var(--primary-color);
	transition:transform 0.3s ease;
}

.displayContentToggle.rotated{
	transform:rotate(180deg);
}


/* RESPONSIVE DESIGN */
/* ================= */

/* COMPACT DEVICES */
@media screen and (max-width:1200px){
	.stat-box{
		padding:10px;
	}

	.submit-btn,
	.secundary-btn{
		padding:5px 15px;
	}
}

/* SMALL DEVICES */
@media screen and (max-width:700px){
	#content{
    width:94%;
  }

  .notif{
    width:min(320px, calc(100vw - 30px));
  }

  #notifs_container{
    right:15px;
    top:15px;
  }

	.table-wrap table th,
	.table-wrap table td{
		padding:4px 8px;
	}

	/* (UN)DISPLAY CONTENT ON SMALL DEVICES */
	#display_content_toggle{
		display:block;
	}

	#display_content_toggle button{
		display:flex;
		flex-direction:row;
		align-items:center;
		gap:5px;
	}
}