@import url("../font/Arial-MT/stylesheet.css");
:root {
	/* --- Colors --- */
  	--bg-primary: #000000;
	--bg-secondary: #0a0a0a;
	--bg-surface: #141414;
	--pop-surface: #070707;
	--project-text: #c2a78c;
	--project-title: #826344;
	--project-link: #b56c2d;
  
  	/* Accents */
  	--accent-gold: #c59d5f;
  	--accent-bronze: #8e6d45;
  	--accent-tan: #b39b7d;
  
	/* Status Colors */
  	--status-green: #00ff7f; /* Success/High Finish Rate */
	--status-red: #ff3b30;   /* Late/Low Score */
	--status-orange: /*#ff9500*/ #f68b23; /* Active/Warning */
	--status-cyan: #00f2ff;   /* Info/Secondary Metrics */
  	--success-green: #0fae67;
	--warning-yellow: #fdcf21;
  
  	/* Text Colors */
  	--text-main: #ffffff;
	--text-muted: #888888;
	--text-dim: #444444;
	--pop-text: #ab8b6c;

  	/* --- Typography --- */
	/* Main body and headings */
  	--font-primary: "Arial Narrow", sans-serif;
  	--font-secondary: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
  
	/* Font Weights */
  	--weight-bold: 700;
  
  	/* Typography Variables */
  	--font-heading: var(--weight-bold) 24px/1.2 var(--font-primary);
  	--font-body: 400 14px/1.5 'Arial Rounded MT';
  	--font-rounded-stat: var(--weight-bold) 16px 'Arial Rounded MT';
}

* {
	margin: 0;
  	padding: 0;
  	box-sizing: border-box;
  	font-family: 'Arial Rounded MT';
	color: var(--text-main);
	font-size: 14px;
}

body {
	height: 100%;
	background: #000;
	font-family: 'Arial Rounded MT';
}

img {width: 100%;}

.input-group {
  	display: flex;
  	align-items: center;
  	height: 50px;
  	padding: 0 10px;
	margin-bottom: 15px;
  	background: rgba(0, 0, 0, 0.85);
	border: 1px solid var(--accent-gold);
}

.input-group input.form-control {color: var(--text-main);}

.form-control:focus {
    background-color: transparent;
    outline: none;
    box-shadow: none;
}

.check-box-wrap {
  	color: var(--text-main);
	text-align: left;
}

.bw-checkbox {
  	display: flex;
  	align-items: center;
  	gap: 8px;
  	color: var(--text-main);
  	cursor: pointer;
  	user-select: none;
}

.bw-checkbox input {display: none;}

.checkmark {
  	width: 18px;
  	height: 18px;
	background: var(--pop-text);
  	position: relative;
	transition: all 0.2s ease;
}

.bw-checkbox:hover .checkmark, .bw-checkbox input:checked + .checkmark {border-color: var(--text-main);}

.bw-checkbox input:checked + .checkmark::after {
  	content: "";
  	position: absolute;
  	left: 6px;
  	top: 0px;
	width: 6px;
  	height: 12px;
  	border: solid var(--text-main);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.bw-checkbox input:focus + .checkmark {box-shadow: 0 0 0 2px rgba(171, 139, 108, 0.3);}
.project-text {color: var(--project-text);}
.project-link {color: var(--project-link);}
.dashboard-title {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  color: var(--accent-gold);
  text-transform: uppercase;
}

.stat-percentage {
  font-family: 'Arial Rounded MT';
  color: var(--status-green);
  font-size: 1.5rem;
}

.button-primary {
  background: linear-gradient(180deg, var(--accent-gold), var(--accent-bronze));
  font-family: 'Arial Rounded MT';
  color: var(--bg-primary);
  border-radius: 4px;
}
.btn-main {background: linear-gradient(to right, #c79a6b 0%,  #c79a6b 20%, #51371e 100%);}
.main-header {
    height: 60px;
    background-color: var(--bg-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 0 20px;
	color: var(--accent-gold);
	background: linear-gradient(to right,#000000 5%, #1a1a1a 100%);
	border-bottom: 3px solid #2c2b2b;
}

.main-header span.icon-box img {max-width: 35px;}

.main-header .brand-text {
    letter-spacing: 1px;
	color: #e1d6cc;font-weight: 600;font-size: 18px;margin-left: 10px;
}

.main-header .gold-text {color: #be9760;font-size: 18px;}

.main-header .hamburger-btn {
    background: linear-gradient(to right,#000000 5%, #1a1a1a 100%);
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 1001;width: 100%;
	align-items: center;justify-content: center;height: 100%;max-width: 80px;
}

.main-header .hamburger-btn span {
    display: block;
    width: 25px;
    height: 2px;
    background-color: var(--accent-gold);
    transition: 0.3s;
}

.main-dasbboard .side-overlay {
    position: fixed;
    top: 0;
    right: -450px;
	width: 100%;
    max-width:  450px;
    height: 100%;
    background-color: rgba(10, 10, 10, 0.95);
    border-left: 1px solid var(--bg-surface);
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    padding-top: 80px;
}

.main-dasbboard .side-overlay.open {right: 0;}

.main-dasbboard .menu-content {padding: 0 40px;}

.main-dasbboard .menu-title {
    color: var(--accent-gold);
    font-size: 30px;
    margin-bottom: 30px;
    padding-bottom: 10px;
}

.main-dasbboard .menu-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.main-dasbboard .menu-link {
    color: var(--text-main);
    text-decoration: none;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: 0.2s;
}

.main-dasbboard .menu-link:hover {
    color: var(--accent-gold);
    transform: translateX(5px);
}
.main-dasbboard nav.menu-nav img {max-width: 25px;}
.ui-datepicker, .datepicker{z-index: 999999 !important;}
/* DATEPICKER WRAPPER */
.ui-widget.ui-widget-content{
	background:#000000;
	border: 1px solid var(--text-dim);
	border-radius:12px;
	padding:10px;
	width:280px;
	z-index:9999 !important;
}

/* HEADER */
.ui-datepicker .ui-datepicker-header{
	background-color: var(--accent-tan);
	border:none;
	border-radius:8px;
	color:#ffffff;
	padding:10px;
}

/* TITLE */
.ui-datepicker-title{
	color:#ffffff;
	font-weight:600;
}

/* PREV / NEXT */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next{
	cursor:pointer;
	top:8px;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span{
	filter:brightness(10);
}


.ui-datepicker table{
	margin-top:10px;
}

.ui-datepicker th{
	color:#ffffff;
	font-weight:500;
	padding:8px 0;
}
.ui-datepicker td a{
	background:#000000;
	border:none !important;
	color:#ffffff !important;
	text-align:center;
	padding:10px;
	border-radius:8px;
	transition:.2s ease;
}
.ui-datepicker td a:hover{
	background: var(--accent-tan) !important;
	color:#ffffff !important;
}

.ui-datepicker .ui-state-active{
	background: var(--accent-tan) !important;
	color:#ffffff !important;
}
.ui-datepicker .ui-state-highlight{
	background: var(--accent-tan) !important;
	color:#ffffff !important;
}
.ui-datepicker .ui-state-disabled span{
	color:rgba(255,255,255,.3) !important;
	background:transparent !important;
}
.ui-state-default,
.ui-widget-content .ui-state-default{
	border:none !important;
	background:none !important;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover{
	border:none !important;
	background: var(--accent-tan) !important;
	color:#ffffff !important;
}
.ui-datepicker .ui-state-highlight{
	background:#51d8ad !important;
	color:#ffffff !important;
	border-radius:8px;
}
.ui-widget-header .ui-datepicker-next span.ui-icon.ui-icon-circle-triangle-e {
    background: none !important;
    background-image: url(../images/chevron-right-solid.svg)!important;
    background-position: center;
    background-repeat: no-repeat !important;
    left: auto;
    right: 0;
}
.ui-widget-header .ui-datepicker-prev span {right: 0;left: auto;}