/**
 * PHPR Proof Room -- Action Layer Styles
 * IMPORTANT: Only defines NEW classes. Does NOT redefine .phpr-btn, .phpr-field,
 * .phpr-msg, .phpr-modal, .phpr-checkbox etc. -- those come from phpr.css.
 */

/* --- Variables (action layer — emerald aligned) --- */
:root {
	--qa-radius    : 12px;
	--qa-shadow    : 0 8px 24px rgba(5, 150, 105, 0.12);
	--qa-border    : #a7f3d0;
	--qa-blue      : #059669;
	--qa-blue-lt   : #ecfdf5;
	--qa-green     : #047857;
	--qa-green-lt  : #d1fae5;
	--qa-amber     : #b45309;
	--qa-amber-lt  : #fffbeb;
	--qa-red       : #dc2626;
	--qa-red-lt    : #fef2f2;
	--qa-purple    : #7c3aed;
	--qa-purple-lt : #f5f3ff;
	--qa-orange    : #c2410c;
	--qa-orange-lt : #fff7ed;
}

/* --- Back to Control Room link --- */
.phpr-back-btn {
	display        : inline-flex;
	align-items    : center;
	gap            : 4px;
	font-size      : 0.82rem;
	font-weight    : 600;
	text-decoration: none;
	padding        : 6px 12px;
}
.phpr-back-btn:hover {
	background     : var(--qa-blue-lt);
	border-color   : var(--qa-blue);
	color          : var(--qa-blue);
	text-decoration: none;
}

/* --- Quick Actions Panel --- */
.phpr-qa-panel {
	background    : #fff;
	border        : 1px solid var(--qa-border);
	border-radius : var(--qa-radius);
	box-shadow    : none;
	margin-top    : 0;
	overflow      : hidden;
}
.phpr-qa-header {
	display         : flex;
	align-items     : center;
	justify-content : space-between;
	padding         : 12px 16px;
	background      : #f7f9fb;
	border-bottom   : 1px solid var(--qa-border);
	flex-wrap       : wrap;
	gap             : 8px;
}
.phpr-qa-title {
	display     : flex;
	align-items : center;
	gap         : 6px;
	font-weight : 600;
	font-size   : 0.9rem;
	color       : #1e2630;
}
.phpr-qa-title svg { color: var(--qa-blue); }
.phpr-qa-badges { display: flex; flex-wrap: wrap; gap: 6px; }

.phpr-qa-group {
	padding       : 12px 16px;
	border-bottom : 1px solid var(--qa-border);
}
.phpr-qa-group:last-child { border-bottom: none; }

.phpr-qa-group__label {
	display        : block;
	font-size      : 0.72rem;
	font-weight    : 600;
	text-transform : uppercase;
	letter-spacing : 0.05em;
	color          : #888;
	margin-bottom  : 8px;
}
.phpr-qa-group__btns { display: flex; flex-wrap: wrap; gap: 6px; }

/* --- Quick Action Buttons --- */
.phpr-qa-btn {
	display         : inline-flex;
	align-items     : center;
	gap             : 4px;
	padding         : 6px 12px;
	border-radius   : 5px;
	border          : 1px solid var(--qa-border);
	background      : #fff;
	color           : #333;
	font-size       : 0.82rem;
	font-weight     : 500;
	cursor          : pointer;
	transition      : background 0.15s, border-color 0.15s, color 0.15s;
	line-height     : 1.4;
	text-transform  : none;
	letter-spacing  : normal;
}
.phpr-qa-btn:hover { background: var(--qa-blue-lt); border-color: var(--qa-blue); color: var(--qa-blue); }
.phpr-qa-btn--primary  { background: var(--qa-blue);      border-color: var(--qa-blue);   color: #fff; }
.phpr-qa-btn--primary:hover  { background: #1a5f97; border-color: #1a5f97; color: #fff; }
.phpr-qa-btn--success  { background: var(--qa-green-lt);  border-color: var(--qa-green);  color: var(--qa-green); }
.phpr-qa-btn--success:hover  { background: var(--qa-green);  color: #fff; }
.phpr-qa-btn--warning  { background: var(--qa-amber-lt);  border-color: var(--qa-amber);  color: var(--qa-amber); }
.phpr-qa-btn--warning:hover  { background: var(--qa-amber);  color: #fff; }
.phpr-qa-btn--urgent   { background: var(--qa-red-lt);    border-color: var(--qa-red);    color: var(--qa-red); }
.phpr-qa-btn--urgent:hover   { background: var(--qa-red);    color: #fff; }
.phpr-qa-btn--escalate { background: var(--qa-orange-lt); border-color: var(--qa-orange); color: var(--qa-orange); }
.phpr-qa-btn--escalate:hover { background: var(--qa-orange); color: #fff; }
.phpr-qa-btn--danger   { background: var(--qa-red-lt);    border-color: var(--qa-red);    color: var(--qa-red); }
.phpr-qa-btn--danger:hover   { background: var(--qa-red);    color: #fff; }
.phpr-qa-btn--reprint  { background: var(--qa-purple-lt); border-color: var(--qa-purple); color: var(--qa-purple); }
.phpr-qa-btn--reprint:hover  { background: var(--qa-purple); color: #fff; }

/* --- Badges --- */
.phpr-badge {
	display        : inline-flex;
	align-items    : center;
	gap            : 4px;
	padding        : 3px 8px;
	border-radius  : 20px;
	font-size      : 0.72rem;
	font-weight    : 700;
	letter-spacing : 0.04em;
}
.phpr-badge--urgent    { background: var(--qa-red);    color: #fff; }
.phpr-badge--escalated { background: var(--qa-orange); color: #fff; }
.phpr-job-card .phpr-badge { margin-left: 6px; font-size: 0.65rem; padding: 2px 6px; }

/* --- Action Modals --- */
.phpr-action-modal {
	position        : fixed;
	inset           : 0;
	z-index         : 2147483000;
	display         : flex;
	align-items     : flex-start;
	justify-content : center;
	padding-top     : 24px;
	padding-bottom  : 24px;
	overflow-y      : auto;
}
.phpr-action-modal[hidden] { display: none !important; pointer-events: none !important; }

#phpr-action-modals-store[hidden],
#phpr-action-modals-store .phpr-action-modal[hidden] {
	display: none !important;
	pointer-events: none !important;
	visibility: hidden !important;
}
.phpr-action-modal.phpr-action-modal--open:not([hidden]) {
	display: flex;
}

body.phpr-action-modal-open #phpr-job-modal .phpr-modal__overlay {
	pointer-events: none;
}

body.phpr-action-modal-open .phpr-action-modal:not([hidden]) {
	z-index: 2147483647 !important;
}

.phpr-action-modal:not([hidden]) {
	z-index: 2147483647;
}

/* ── Inline drawer (inside job modal — no fullscreen dim) ── */
.phpr-qa-drawer {
	margin: 0 20px 20px;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #dbeafe;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.phpr-qa-drawer.phpr-qa-drawer--open {
	animation: phprQaDrawerIn 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.phpr-qa-drawer[hidden] {
	display: none !important;
}

.phpr-action-modal.phpr-action-modal--inline {
	position   : relative;
	inset      : auto;
	z-index    : auto;
	display    : block !important;
	padding    : 0;
	overflow   : visible;
}

.phpr-action-modal--inline .phpr-action-modal__overlay {
	display: none !important;
}

.phpr-action-modal--inline .phpr-action-modal__box {
	width         : 100%;
	max-width     : none;
	max-height    : none;
	border        : none;
	border-radius : 0;
	box-shadow    : none;
}

.phpr-action-modal--inline .phpr-action-modal__header {
	background  : #f7f9fb;
	color       : #1e2630;
	border-bottom: 1px solid var(--qa-border);
}

.phpr-action-modal--inline .phpr-action-modal__header h3 {
	color: #1e2630;
}

.phpr-action-modal--inline .phpr-action-modal__body {
	max-height: min(420px, 50vh);
	overflow-y: auto;
}

#phpr-job-modal .phpr-qa-drawer {
	margin: 0 0 16px;
}

#phpr-job-modal .phpr-action-modal--inline .phpr-action-modal__footer {
	background: #fafbfc;
	border-top: 1px solid var(--qa-border);
}

.phpr-action-modal__overlay {
	position   : absolute;
	inset      : 0;
	background : rgba(0,0,0,.45);
}
.phpr-action-modal__box {
	position       : relative;
	z-index        : 1;
	background     : #fff;
	border-radius  : 10px;
	box-shadow     : 0 8px 40px rgba(0,0,0,.2);
	width          : 520px;
	max-width      : calc(100vw - 32px);
	max-height     : 90vh;
	display        : flex;
	flex-direction : column;
	overflow       : hidden;
}
.phpr-action-modal__header {
	display         : flex;
	align-items     : center;
	justify-content : space-between;
	padding         : 16px 20px;
	border-bottom   : 1px solid var(--qa-border);
	background      : #f7f9fb;
	flex-shrink     : 0;
}
.phpr-action-modal__header h3 { margin: 0; font-size: 1rem; color: #1e2630; }

.phpr-action-modal__close {
	background    : none;
	border        : none;
	font-size     : 1.1rem;
	cursor        : pointer;
	color         : #666;
	padding       : 2px 6px;
	border-radius : 4px;
	line-height   : 1;
}
.phpr-action-modal__close:hover { background: #f0f1f3; color: #333; }

.phpr-action-modal__body {
	padding    : 20px;
	overflow-y : auto;
	flex       : 1;
}
.phpr-action-modal__note { color: #666; font-size: 0.85rem; margin: 0 0 16px; line-height: 1.5; }

.phpr-action-modal__textarea {
	width: 100%; box-sizing: border-box; padding: 8px 10px;
	border: 1px solid var(--qa-border); border-radius: 5px;
	font-size: 0.875rem; line-height: 1.6; resize: vertical; font-family: inherit;
	transition: border-color 0.15s;
}
.phpr-action-modal__textarea:focus { outline: none; border-color: var(--qa-blue); box-shadow: 0 0 0 2px rgba(34,113,177,.15); }

.phpr-action-modal__input {
	width: 100%; box-sizing: border-box; padding: 8px 10px;
	border: 1px solid var(--qa-border); border-radius: 5px;
	font-size: 0.875rem; font-family: inherit; transition: border-color 0.15s;
}
.phpr-action-modal__input:focus { outline: none; border-color: var(--qa-blue); box-shadow: 0 0 0 2px rgba(34,113,177,.15); }

.phpr-action-modal__select {
	width: 100%; box-sizing: border-box; padding: 8px 10px;
	border: 1px solid var(--qa-border); border-radius: 5px;
	font-size: 0.875rem; font-family: inherit; background: #fff; cursor: pointer;
}
.phpr-action-modal__select:focus { outline: none; border-color: var(--qa-blue); }

.phpr-action-modal__footer {
	padding         : 14px 20px;
	border-top      : 1px solid var(--qa-border);
	display         : flex;
	gap             : 8px;
	justify-content : flex-end;
	flex-shrink     : 0;
	background      : #fafbfc;
}

.phpr-action-modal__body .phpr-field { margin-bottom: 14px; }
.phpr-action-modal__body .phpr-field:last-child { margin-bottom: 0; }

.phpr-act-check-label {
	display: flex; align-items: flex-start; gap: 8px;
	font-size: 0.85rem; color: #444; cursor: pointer;
}
.phpr-act-check-label input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }

.phpr-act-required { color: var(--qa-red); }
.phpr-act-checklist { display: flex; flex-direction: column; gap: 8px; }

/* --- Action result bar --- */
.phpr-action-result { padding: 8px 12px; border-radius: 5px; font-size: 0.85rem; margin-top: 12px; }
.phpr-action-result--ok  { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.phpr-action-result--err { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

.phpr-msg--warn { background: var(--qa-amber-lt); color: var(--qa-amber); border: 1px solid #ffe082; }

/* --- WhatsApp block --- */
.phpr-wa-wrap {
	background: #e8f5e9; border: 1px solid #c8e6c9;
	border-radius: 6px; padding: 12px; margin-top: 10px;
}
.phpr-wa-note { font-size: 0.82rem; color: #2e7d32; margin-bottom: 8px; }
.phpr-wa-preview {
	background: #fff; border: 1px solid #c8e6c9; border-radius: 6px;
	padding: 10px 12px; font-size: 0.85rem; white-space: pre-wrap;
	max-height: 120px; overflow-y: auto; color: #333; margin-bottom: 8px;
}
.phpr-wa-actions { display: flex; gap: 8px; }

/* --- Activity Timeline Panel --- */
.phpr-activity-panel {
	background: #fff; border: 1px solid var(--qa-border);
	border-radius: var(--qa-radius); box-shadow: var(--qa-shadow);
	margin-top: 16px; overflow: hidden;
}
.phpr-activity-header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px 16px; background: #f7f9fb;
	border-bottom: 1px solid var(--qa-border); flex-wrap: wrap; gap: 8px;
}
.phpr-activity-title {
	display: flex; align-items: center; gap: 6px;
	font-weight: 600; font-size: 0.9rem; color: #1e2630;
}
.phpr-activity-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.phpr-activity-filter {
	padding: 4px 10px; border: 1px solid var(--qa-border); border-radius: 20px;
	background: #fff; color: #555; font-size: 0.75rem; font-weight: 500;
	cursor: pointer; transition: background 0.12s, color 0.12s;
}
.phpr-activity-filter:hover,
.phpr-activity-filter--active { background: var(--qa-blue); border-color: var(--qa-blue); color: #fff; }

.phpr-activity-list { max-height: 400px; overflow-y: auto; }
.phpr-activity-loading { padding: 20px; text-align: center; color: #999; font-size: 0.85rem; }
.phpr-activity-loading--err { color: var(--qa-red); }
.phpr-activity-empty { padding: 20px; text-align: center; color: #aaa; font-size: 0.85rem; }

.phpr-activity-item {
	display: flex; align-items: flex-start; gap: 10px;
	padding: 10px 16px; border-bottom: 1px solid #f0f1f3; transition: background 0.1s;
}
.phpr-activity-item:last-child { border-bottom: none; }
.phpr-activity-item:hover { background: #fafbfd; }

.phpr-activity-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.phpr-activity-body { flex: 1; min-width: 0; }
.phpr-activity-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.phpr-activity-label { font-size: 0.85rem; font-weight: 600; color: #222; }
.phpr-activity-by    { font-size: 0.78rem; color: #888; }
.phpr-activity-time  { font-size: 0.75rem; color: #aaa; margin-left: auto; white-space: nowrap; }
.phpr-activity-detail {
	font-size: 0.82rem; color: #555; margin-top: 3px;
	white-space: pre-wrap; word-break: break-word;
}

/* --- Responsive --- */
@media (max-width: 640px) {
	.phpr-qa-group__btns { flex-direction: column; }
	.phpr-qa-btn { width: 100%; justify-content: flex-start; }
	.phpr-action-modal__footer { flex-direction: column-reverse; }
	.phpr-action-modal__footer .phpr-btn { width: 100%; justify-content: center; }
	.phpr-activity-header { flex-direction: column; align-items: flex-start; }
}