/* Common Button Styles - Reusable across all pages */
.btn-default, .btn-stop, .btn-start, .btn-disabled, .btn-delete {
	padding: 4px 8px;
	margin: 1px;
	border-radius: 4px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	display: inline-block !important;
	transition: all 0.2s ease;
	border: none;
	cursor: pointer;
	text-shadow: 0 1px 2px rgba(0,0,0,0.1);
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	color: white !important;
}

.btn-default:hover, .btn-stop:hover, .btn-start:hover, .btn-disabled:hover, .btn-delete:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	text-decoration: none;
}

/* Default button - neutral blue */
.btn-default {
	background-color: #007bff !important;
}

.btn-default:hover {
	background-color: #0056b3 !important;
}

/* Stop button - amber (pause is reversible; red is reserved for delete) */
.btn-stop {
	background-color: #e0a800 !important;
}

.btn-stop:hover {
	background-color: #c69500 !important;
}

/* Start button - green */
.btn-start {
	background-color: #28a745 !important;
}

.btn-start:hover {
	background-color: #218838 !important;
}

/* Delete button - red (irreversible; must never read like .btn-disabled) */
.btn-delete {
	background-color: #dc3545 !important;
}

.btn-delete:hover {
	background-color: #c82333 !important;
}

.btn-disabled {
	background-color: #6c757d !important;
	cursor: not-allowed;
	opacity: 0.6;
}

/* Active states */
.btn-default:active, .btn-stop:active, .btn-start:active, .btn-delete:active {
	transform: translateY(0);
}

.status-1, .status-ENABLE, .status-ENABLED, .status-Enabled,
.status-ACTIVE, .status-DONE, .status-COMPLETED, .status-Published,
.status-APPROVED, .status-Approved, .status-SUCCESS, .status-Success,
.status-STATUS_ENABLE, .status-ADVANTAGE_PLUS_APP { color: green; }

.status-0, .status-STATUS_LIMIT, .status-FAILED, .status-Failed,
.status-REJECTED, .status-Rejected { color: red; }

.status-DISABLED, .status-Disabled, .status-STATUS_LIMIT,
.status-DISAPPROVED, .status-Disapproved,
.status-DELETED, .status-deleted { color: darkred; }

.status-PAUSED, .status-Paused { color: #6c757d; }

/* #176: not yet pushed to Meta -- kept visually distinct from PAUSED (grey, a real Meta state)
   and PENDING (orange, already queued for upload). */
.status-DRAFT { color: #007bff; }

.status-PENDING, .status-Pending, .status-WITH_ISSUES {
	color: #fd7e14; 
}

.chosen-container-multi .chosen-choices li.search-choice {
	max-width: 100%;
}

/* Custom tooltip for status */
.status-tooltip {
	position: relative;
	cursor: help;
	border-bottom: 1px dotted #666;
}
.status-tooltip .tooltip-text {
	visibility: hidden;
	position: absolute;
	z-index: 1000;
	background-color: #333;
	color: #fff;
	text-align: left;
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 12px;
	line-height: 1.4;
	white-space: pre-wrap;
	word-wrap: break-word;
	max-width: 400px;
	min-width: 200px;
	bottom: 125%;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	transition: opacity 0.2s, visibility 0.2s;
	box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.status-tooltip .tooltip-text::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #333 transparent transparent transparent;
}
.status-tooltip:hover .tooltip-text {
	visibility: visible;
	opacity: 1;
}
.status-tooltip .tooltip-text-conditional:empty {
	display: none;
}
.status-tooltip .tooltip-text-conditional:empty::after {
	display: none;
}
.data_table .field_label {word-break: break-all;}
.data_table .layout_html {word-break: break-all;}

.data_table .short_string
{
	width:150px;
	word-wrap:break-word;
	white-space:normal;
	overflow:auto;
}
.data_table .medium_string
{
	width:200px;
	word-wrap:break-word;
	white-space:normal;
	overflow:auto;
}
.data_table .long_string.fit-content {
	max-height: fit-content;
}
.data_table .attr-value {
	color: firebrick
}

#main_content div.master-detail .search_form>.search_result>.table_container {
	width: 100%;
}

.currency.VND {
	color: inherit;
}
.currency.USD {
	color: #007bff;
}

.alert-box {
	padding: 4px;
	border-radius: 2px; /* Softens the corners */
	color: #333; /* Darker text for readability */
}

.alert-box strong {
	text-transform: uppercase;
}

.alert-box.warning {
	border: 1px solid #ffeb3c; /* A yellow/gold border color */
	background-color: #fffde7; /* A light yellow background */
}

.alert-box.notice {
	border: 1px solid #007bff; /* A green border color */
	background-color: #e0f2ff; /* A light green background */
}

div.master-detail>ul.breadcrumb>li>a {
	max-width: 320px;
}

.quick-links a {
	display: block;
	margin: 2px;
}
div.master-detail>.box-right {
    width: calc(100% - 294px);
}
div.master-detail.box-left-hidden > .box-left {
	display:none;
}
div.master-detail.box-left-hidden > .box-right {
	width:calc(100% - 14px);
}
div.master-detail > .box-toggle {
	float:left;
	padding:8px 4px;
	margin-top:8px;
	cursor:pointer;
	text-decoration:none;
	font-size:16px;
}

/* Change for record selector combobox on master detail */
div.master-detail>ul.breadcrumb {
    padding: 6px 0;
    border-bottom: 1px solid #ccc;
}
.chosen-container .chosen-single>div {
    height: 32px;
    line-height: 32px;
}

/*
 * External list (jquery.tokeninput) — keep a multi-select field from growing without bound.
 *
 * The token <ul class="token-input-list"> renders one <li> per selected record, and
 * metronic.css caps neither its height (`overflow:hidden`) nor its wrapper
 * (`.field_externallist` only sets `min-height`). Selecting dozens/hundreds of records
 * therefore stretches the field — and its absolutely positioned `.el_button`
 * (top:0/bottom:0) — to thousands of pixels, pushing the remaining fields and the submit
 * row off screen (measured: 100 tokens => 2502px tall).
 *
 * Cap the height and scroll the token list instead.
 *
 * Safe generically (framework-level, no page/.dic knowledge):
 *  - the suggestion dropdown is appended to <body> by jquery.tokeninput.js, so it is never
 *    clipped by an overflow on the list;
 *  - `overflow-y:auto` still establishes a block formatting context, so the floated tokens
 *    stay contained exactly as `overflow:hidden` contained them;
 *  - single-select fields hold one token, so they are unaffected.
 *
 * This file is linked AFTER metronic.css in skin/metronic_classic/index.jsp, so it wins over
 * the skin's `ul.token-input-list { overflow:hidden }` at equal specificity. Override the cap
 * per app by redefining --externallist-max-height.
 */
:root {
	--externallist-max-height: 160px;
}

ul.token-input-list {
	max-height: var(--externallist-max-height, 160px);
	overflow-x: hidden;
	overflow-y: auto;
}