body  { background-color: var(--background-color); }
#content { min-width: 900px; color: var(--text-color); background-color: var(--foreground-color); }
#header h1 { background: var(--background-color); url('../img/cake.icon.png') no-repeat left; }

h2 { color: #018aac; background-color: var(--foreground-color); }
h3 { color: var(--muted-background-color); }

div.dashbox h3 { display: inline-block; }
.cake-error, p.error, .error-message { background: #b9144e; } 
form .submit input[type=submit] { background: #0a4f5f; } 
form .submit input[type=submit]:hover { background:#1a5f6f; } 
form .input { color: var(--text-color); }

select, input { 
	color: var(--text-color);
	background-color: var(--element-background);
	border-color: var(--outline-color);
	
}

#DeviationRequestAddForm textarea, #DeviationRequestAddForm select, #DeviationRequestAddForm input {
	border: 1px solid var(--apqp-text-border-color);
	background-color: var(--apqp-text-background-color);
	color: var(--text-link-color);
}
#DeviationRequestAddForm input:disabled {
	background-color: var(--disabled-background-color);
    border-color: var(--disabled-border-color);
    color: var(--disabled-color);
}

textarea {
	background-color: var(--element-background);
	color: var(--text-link-color);
	border: 1px solid var(--apqp-text-border-color);
}
fieldset legend { color: var(--muted-background-color); }
dl dd:nth-child(4n+2), dl dt:nth-child(4n+1) { background: var(--element-background); }


.searchBox { padding: 5px; border: 1px solid #aaa; border-radius: 5px; margin: 5px 0px; }
#dashboard { display: inline-block; width: 85%; border-left: 1px solid var(--outline-color); }
.dashbox { 
	width: 48%;
	min-width: 700px;
	margin: 15px 8px; 
	padding: 8px 5px 10px 5px; 
	border: 1px solid var(--outline-color);
	border-radius: 5px;
}
.dashbox h3 { 
	margin: 2px 0px;
	color: #018aac; font-weight: bold;
	font-size: 16px;
 }
.dashboxes {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}

.attError { display:none; color:red; font-weight: bold; }

form .inline {
	display: inline-block;
}

form .smallnumbers {
	width:100px;
}

fieldset.filter {
	border: 1px solid var(--text-link-color);
	padding: 3px;
	margin: 3px;
	font-size: 11px;
}

fieldset.filter legend {
	font-size: 12px;
	color: var(--text-link-color);
	padding: 0px 3px;
}

button.mButton {
	border: 1px solid #777;
	background-color: #444;
	border-radius: 3px;
	padding:5px;
	cursor: pointer;
}
span.mButtonText, a.mButtonText {
	color: #e8e8e8;
	text-decoration: none;
	font-weight: normal;
}
button.mButton:hover { color: #f5f5f5; background-color: #222; border:1px solid orange; }
span.mButtonText:hover, a.mButtonText:hover { color: #f5f5f5; }

a.mButtonLink {
	border: 1px solid #777;
	background-color: #444;
	border-radius: 3px;
	padding:5px;
	cursor: pointer;
	color: #e8e8e8;
	text-decoration: none;
	font-weight: normal;
}
a.mButtonLink:hover { color: #f5f5f5; background-color: #222; border:1px solid orange; }


span.takeAction, span.editTask, span.deleteTask, span.completeTask, span.editNote, span.deleteNote, span.editRole, span.deleteRole, span.actionSign, span.deleteFile, span.restoreFile, span.viewFile {
	border: 1px solid #777;
	background-color: #444;
	border-radius: 4px;
	padding:1px 5px;
	cursor: pointer;
	color: #e8e8e8;
}
span.takeAction:hover, span.editTask:hover, span.deleteTask:hover, span.completeTask:hover, span.editNote:hover, span.deleteNote:hover, span.editRole:hover, span.deleteRole:hover, span.actionSign:hover, span.deleteFile:hover, span.viewFile:hover 
{ color: #f5f5f5; background-color: #222; border:1px solid orange; }



table#CRTable tr { cursor: pointer; }
table#DVTable tr { cursor: pointer; }
table#PartTable tr { cursor: pointer; }
table#AssemblyTable tr { cursor: pointer; }
form#Filters { width:100%; }

td.filterCol {
	border: none;
	padding:2px;
}

.inlineFormButton {
	display: inline-block;
	padding-top: 25px;
}

.approved {
	color: #181;
}

.open_modal {
	border: 1px solid #5a5a5a;
	padding: 3px;
	margin: 2px;
	text-decoration: underline;
	color: blue;
	cursor: pointer;
}

.modalForm { display: none; border: 1px solid #5e5e5e; padding:5px; margin: 5px;  }

.moveOneUp {
	width: 16px; height: 16px;
	background-image: url(/css/black-tie/images/ui-icons_222222_256x240.png);
	background-position: 96px 48px;
	cursor: pointer;
	display: inline-block;
}

.moveOneDown {
	width: 16px; height: 16px;
	background-image: url(/css/black-tie/images/ui-icons_222222_256x240.png);
	background-position: 128px 48px;
	cursor: pointer;
	display: inline-block;
}

.holder {
	width: 16px; height: 16px;
	display: inline-block;
}

.validation-error {
	color: red;
	display: none;
	padding: 2px;
}

.related {
	border: 1px solid black;
	padding: 5px;
	margin: 5px;
}

table tr.completedAction { background-color: var(--highlighted-element-color); }
table tr.completed { background-color: var(--highlighted-element-color);}

#isPCR, #isECR, #isDVR { display: none; }

#divEChistories {
	max-height: 400px;
	overflow-y: auto;
}

div#ECTasksContainer { display: none; }
div#PCTasksContainer { display: none; }
div#DVTasksContainer { display: none; }

.clickable { cursor: pointer; }
.inline { display: inline-block; }

#helpHolder { margin: 5px 10px; border:1px solid #111; }
#helpTitle { background-color: #555; color:#eee; padding: 4px; font-size: 14px; }
#helpContent { padding: 10px; }

.FilterPickerBox {
	display: inline-block;
	border: 1px solid #aaa;
	border-radius: 2px;
	padding: 4px;
	margin-bottom: -1px;
	color: var(--text-color);
	background-color: var(--element-background);
	border-color: var(--outline-color);
}

#statusPicker { display: none; border: 1px solid #aaa; }
#StatusArrow { display: inline-block; margin-left: 31px; vertical-align: middle; }
#CreatedArrow { display: inline-block; margin-left: 31px; vertical-align: middle; }
#ModifiedArrow { display: inline-block; margin-left: 31px; vertical-align: middle; }
#CompletedArrow { display: inline-block; margin-left: 31px; vertical-align: middle; }
#DueDateArrow { display: inline-block; margin-left: 31px; vertical-align: middle; }
.FilterDropBox { display: inline-block; }
.SubFilterBox { display: none; border: 1px solid #aaa; }
#exportDataIE { clear: both; border:1px solid #888; padding: 5px; margin: 5px; }


#divUploaderContainer { background-color: #4d5256; border: 2px solid #4c6680; border-radius: 5px; width: 50%; }
form#upload { width:auto; margin-right: 0px; padding: 6px; }
#divUploaderContainer ul { list-style: none; }
#divUploaderContainer ul li { padding: 10px 0; margin: 1px; color: #ccc; }
#divUploaderContainer ul li p { display: inline-block;  }
#divUploaderContainer ul li p i { padding: 0 24px; }
#divUploaderContainer ul li span { padding: 0 20px; display: inline-block; border:1px solid #aaa; padding:7px; border-radius:4px; background-color: #555; }
#divUploaderContainer ul li.working { background-color: #5d6266; }
#DropBox {
    border: 4px dashed #ccc;
    border-radius: 4px;
    width: 90%;
    margin: 3px auto;
    padding: 10px;
    background-color: #404a4f;
}
#DropBox.hover { border: 3px solid #77aa77; }

.DropText { color: #ccc; font-size: 14px; font-weight: bold; margin: 5px auto; width: 100%; text-align:center; }
.DropInput { color: #ccc; font-size: 12px; margin: 5px auto; width: 80%; text-align:center; }

.revisions { width: 100px; }
span#rejection_release {
  	padding: 4px;
    border: 1px solid #f00;
	margin-left: 5px;
	border-radius: 5px;
	background-color: #e99;
	cursor: pointer;
	color: var(--text-link-color);
}

table tr.deletedFile, table tr.deletedFile:nth-child(even), table tr.deltedFile:nth-child(odd) {
	background-color: var(--highlighted-element-color);
	color: var(--text-color);
}

img.deletedFile {
	filter: grayscale(100%);
	opacity: 0.7;
}

.addIcon {
    width: 16px;
    height: 16px;
    background-image: var(--add-icon-path);
    background-size: cover;
    display: inline-block;
	cursor: pointer;
}

#DeviationRequestAddForm .addIcon {
	position: absolute;
	top: 32px;
	right: 5px;
}

.searchBad { border: 3px solid #e88 !important;  }
.searchBad:focus { outline: 1px solid #e88 !important;  }

.searchGood { border: 1px solid #8e8 !important; }
.searchGood:focus { border: 1px solid #8e8 !important; }

.noteButton {
    background-image: var(--note-icon-path);
    background-size: 16px 16px;
    width: 16px;
    height: 16px;
    display: none;
    cursor: pointer;
}


.switch-container {
    display: flex;
    align-items: center;
}

.switch {
    position: relative;
    display: inline-block;
    width: 38.8px;
    height: 22px;
    margin-left: 10px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 22px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16.8px;
    width: 16.8px;
    left: 2.6px;
    bottom: 2.6px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--background-color);
}

input:checked + .slider:before {
    transform: translateX(16.8px);
}

.DeviationRequests dt {
	width: 12em;
}

.DeviationRequests dd {
	margin-left: 12em;
}

#DeviationRequestAddForm label.required:after, #DeviationRequestEditForm label.required:after {
	color: #e32;
	content: '*';
	display: inline;
}

div.picker {
	display: none;
	padding: 2px;
	z-index: 2;
	border: 1px solid #555;
	border-radius: 3px;
	width: 90%;
	margin: 3px;
	background-color: var(--apqp-text-border-color);
}
div.picker ul { list-style: none; }
div.picker ul li { margin: 1px; cursor: pointer; }
div.picker ul li:hover { background-color: rgba(0,0,0,0.2); }

.errorBox {
	color: red;
	border: 1px solid red;
	padding: 5px;
	border-radius: 5px;
	display: none;
}

.changeRequests dt, .users dt {
	width: 15em;
}

.changeRequests dd, .users dd {
	margin-left: 15em;
}

td.actions {
    text-align: left;
}

select {
    width: 100%;
}

a {
    text-decoration: none;
}

.part-characteristic-group {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.remove-button, .remove-button-reserved, .remove-char-button {
    padding: 8px 15px;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.remove-button:hover, .remove-button-reserved:hover, .remove-char-button:hover {
    background-color: #c82333;
}

.new-rev-button, .add-button, .edit-button {
    padding: 8px 15px;
    background-color: green;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.new-rev-button:hover, .add-button:hover, .edit-button:hover {
    background-color: darkgreen;
}

/* Assembly Parts Section */
.assembly-parts-section {
    margin: 20px 0;
    padding: 15px;
    background: var(--element-background);
    border-radius: 5px;
}

.parts-container {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.available-parts,
.selected-parts {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 300px; /* Fixed height container */
}

.part-search {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid var(--outline-color);
    border-radius: 4px;
    flex-shrink: 0; /* Prevent search box from shrinking */
}

.available-parts select,
.selected-parts select {
    flex: 1; /* Take remaining space */
    border: 1px solid var(--outline-color);
    border-radius: 4px;
    background-color: var(--element-background);
    color: var(--text-color);
    margin-bottom: 10px;
}

.part-button {
    width: 100%;
    padding: 8px;
    margin: 0;
    background-color: #018AAC;
    color: white;
    border: 1px solid var(--outline-color);
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0; /* Prevent button from shrinking */
}

.part-button:hover {
    background-color: #017A8C;
}

.reserved-parts-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--outline-color);
}

.reserved-part-entry {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.reserved-part-number {
    flex: 1;
    padding: 8px;
    border: 1px solid var(--outline-color);
    border-radius: 4px;
    background-color: var(--element-background);
    color: var(--text-color);
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1000;
}

.modal-content {
    position: absolute;
    background-color: var(--foreground-color);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding: 20px;
    border: 1px solid var(--outline-color);
    border-radius: 5px;
    width: 400px;
    height: fit-content;
}

.modal-form {
    margin: 20px 0;
}

.input-group {
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-color);
}

.input-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--outline-color);
    border-radius: 4px;
    background-color: var(--element-background);
    color: var(--text-color);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding: 0 20px 20px 20px;
    width: calc(100% - 40px);  /* Account for padding */
    position: relative;
    left: 0;
}

.modal-footer .part-button {
    width: auto;
    min-width: 80px;
}

.modal-form input {
	width: 95%;
}

.close-button {
	font-size: 18px;
	position: absolute;
	top: 15px;
	right: 15px;
	cursor: pointer;
}

.button.primary {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
}

.button.primary:hover {
    background-color: #0056b3;
}

/* Serial Number Builder */
.serial-number-builder {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0;
}

.serial-number-builder .form-input {
    text-align: center;
    flex: 1;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 1rem;
}

.form-input.locked {
    background-color: #f3f4f6;
    color: #6b7280;
    cursor: not-allowed;
}

.file-checklist {
	background: var(--apqp-border-color);
	padding: 15px;
	border-radius: 4px;
}

.file-list {
	background: var(--element-background);
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.file-list label {
	padding: 5px;
	transition: background-color 0.2s;
}

.file-list label:hover {
	background-color: var(--outline-color);
}

input[type="checkbox"] {
	margin-right: 8px;
}

/* Roles Edit Page Styles */
.role-form {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.permission-section {
    background: var(--permission-section-background);
    border: 1px solid var(--outline-color);
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.permission-header {
    padding: 15px 20px;
    background: var(--permission-header-background);
    border-bottom: 1px solid var(--outline-color);
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
}

.permission-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text-color);
}

.input.checkbox .section-toggle {
    margin: 0;
}

.permission-content {
    margin: 1em 0 1em 1em;
    padding: 0;
}

.permission-content.collapsed {
    display: none;
}

.form-control {
    width: 95%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.permission-content .input {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.permission-content .input input[type="checkbox"]{
    margin: 0 8px 0 0;
    cursor: pointer;
}

.permission-content .input label{
    margin: 0;
    line-height: 1;
}

.permission-group {
    margin: 0;
    padding: 0;
}

.permission-item {
    margin: 0;
    padding: 0;
}

.sub-permissions {
    margin-left: 25px;
    padding: 0;
    border-left: 2px solid var(--outline-color);
    display: none;
}

.sub-permissions.collapsed {
    display: none;
}

.permission-content .sub-permissions .input {
    margin-bottom: 4px;
    padding-left: 10px;
}

.btn-default.select-all {
    padding: 5px 10px;
    margin: 10px 0;
    background-color: #007bff;
    color: white;
    border: 1px solid var(--outline-color);
    border-radius: 4px;
    cursor: pointer;
}

.btn-default.select-all:hover {
    background-color: #0056b3;
}

/* Template section styles */
.template-link {
    border: 1px solid #777;
    background-color: #444;
    border-radius: 3px;
    padding: 3px 8px;
    cursor: pointer;
    color: #e8e8e8;
    text-decoration: none;
    font-size: 12px;
    display: inline-block;
}

.template-link:hover {
    color: #f5f5f5;
    background-color: #222;
    border: 1px solid orange;
}

.compact-select {
    padding: 4px;
    border: 1px solid var(--outline-color);
    border-radius: 3px;
    background-color: var(--element-background);
    color: var(--text-color);
    font-size: 13px;
}

.help-text {
    color: #666;
    font-size: 11px;
    margin-top: 5px;
}