/**
 * EOD Division Cylinder Report - Shared Styles
 *
 * This CSS file is used by both the Desk page and Web page.
 * Uses CSS custom properties with fallbacks for framework compatibility.
 */

/* ==========================================================================
   CSS VARIABLES (with fallbacks for web context)
   ========================================================================== */
:root {
	--eod-primary: var(--primary, #2490ef);
	--eod-success: var(--green-500, #28a745);
	--eod-warning: var(--orange-500, #ffc107);
	--eod-danger: var(--red-500, #dc3545);
	--eod-info: var(--blue-500, #17a2b8);

	--eod-border-color: var(--border-color, #e2e6e9);
	--eod-bg-color: var(--bg-color, #f7f8f9);
	--eod-card-bg: var(--card-bg, #ffffff);
	--eod-text-color: var(--text-color, #333333);
	--eod-text-muted: var(--text-muted, #8d99a6);
	--eod-heading-color: var(--heading-color, #333333);

	--eod-bg-green: var(--bg-green, #e4f5e9);
	--eod-bg-yellow: var(--bg-yellow, #fff3cd);
	--eod-bg-red: var(--bg-red, #f8d7da);
	--eod-bg-orange: var(--bg-orange, #fff3cd);
	--eod-bg-blue: var(--bg-blue, #e8f4fd);
	--eod-bg-gray: var(--bg-gray, #f4f5f6);

	--eod-text-on-green: var(--text-on-green, #28a745);
	--eod-text-on-yellow: var(--text-on-yellow, #856404);
	--eod-text-on-red: var(--text-on-red, #721c24);
	--eod-text-on-orange: var(--text-on-orange, #856404);
	--eod-text-on-blue: var(--text-on-blue, #2490ef);

	--eod-padding-xs: var(--padding-xs, 4px);
	--eod-padding-sm: var(--padding-sm, 8px);
	--eod-padding-md: var(--padding-md, 16px);
	--eod-padding-lg: var(--padding-lg, 24px);
	--eod-padding-xl: var(--padding-xl, 32px);

	--eod-margin-xs: var(--margin-xs, 4px);
	--eod-margin-sm: var(--margin-sm, 8px);
	--eod-margin-md: var(--margin-md, 16px);
	--eod-margin-lg: var(--margin-lg, 24px);

	--eod-border-radius: var(--border-radius, 4px);
	--eod-border-radius-sm: var(--border-radius-sm, 3px);
	--eod-border-radius-md: var(--border-radius-md, 6px);
	--eod-border-radius-lg: var(--border-radius-lg, 8px);

	--eod-shadow-sm: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.1));

	--eod-text-xs: var(--text-xs, 11px);
	--eod-text-sm: var(--text-sm, 13px);
	--eod-text-md: var(--text-md, 14px);
	--eod-text-lg: var(--text-lg, 18px);
}

/* ==========================================================================
   BASE CONTAINER
   ========================================================================== */
.eod-report-container {
	padding: var(--eod-padding-md);
	max-width: 1400px;
	margin: 0 auto;
}

/* Web-specific container */
.eod-web-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px;
}

.eod-web-header {
	margin-bottom: 20px;
}

.eod-web-header h1 {
	font-size: 24px;
	font-weight: 600;
	color: var(--eod-heading-color);
	margin: 0;
}

.eod-web-filters {
	background: var(--eod-card-bg);
	padding: 20px;
	border-radius: var(--eod-border-radius-lg);
	box-shadow: var(--eod-shadow-sm);
	margin-bottom: 20px;
}

.eod-web-content {
	background: var(--eod-card-bg);
	padding: 20px;
	border-radius: var(--eod-border-radius-lg);
	box-shadow: var(--eod-shadow-sm);
	min-height: 300px;
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.eod-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--eod-padding-xl) var(--eod-padding-md);
	color: var(--eod-text-muted);
}

.eod-empty-icon {
	margin-bottom: var(--eod-margin-md);
	opacity: 0.5;
}

.eod-empty-icon svg {
	stroke: var(--eod-text-muted);
}

/* ==========================================================================
   LOADING STATE
   ========================================================================== */
.eod-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--eod-padding-xl);
	color: var(--eod-text-muted);
}

/* Spinner works in both contexts */
.eod-loading .spinner,
.eod-loading .spinner-border {
	width: 40px;
	height: 40px;
	border: 3px solid var(--eod-border-color);
	border-top-color: var(--eod-primary);
	border-radius: 50%;
	animation: eod-spin 1s linear infinite;
}

@keyframes eod-spin {
	to { transform: rotate(360deg); }
}

.eod-loading p {
	margin-top: var(--eod-margin-md);
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.eod-header {
	margin-bottom: var(--eod-margin-lg);
	padding-bottom: var(--eod-padding-sm);
	border-bottom: 1px solid var(--eod-border-color);
}

.eod-header-info {
	display: flex;
	align-items: center;
	gap: var(--eod-margin-sm);
	flex-wrap: wrap;
}

.eod-header-date {
	color: var(--eod-text-muted);
	font-size: var(--eod-text-md);
}

.eod-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: var(--eod-border-radius);
	font-size: var(--eod-text-sm);
	font-weight: 500;
}

.eod-badge-primary {
	background: var(--eod-bg-blue);
	color: var(--eod-text-on-blue);
}

.eod-badge-secondary {
	background: var(--eod-bg-gray);
	color: var(--eod-text-color);
}

/* ==========================================================================
   CARDS GRID
   ========================================================================== */
.eod-cards-grid {
	display: flex;
	flex-direction: column;
	gap: var(--eod-margin-lg);
}

.eod-mapping-group {
	background: var(--eod-card-bg);
	border: 1px solid var(--eod-border-color);
	border-radius: var(--eod-border-radius-lg);
	overflow: hidden;
}

.eod-mapping-title {
	padding: var(--eod-padding-sm) var(--eod-padding-md);
	background: var(--eod-bg-color);
	border-bottom: 1px solid var(--eod-border-color);
	font-weight: 600;
	font-size: var(--eod-text-md);
	color: var(--eod-heading-color);
}

.eod-item-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--eod-margin-md);
	padding: var(--eod-padding-md);
}

/* ==========================================================================
   ITEM CARD
   ========================================================================== */
.eod-item-card {
	background: var(--eod-card-bg);
	border: 1px solid var(--eod-border-color);
	border-radius: var(--eod-border-radius-md);
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.eod-item-card:hover {
	box-shadow: var(--eod-shadow-sm);
}

.eod-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--eod-padding-sm) var(--eod-padding-md);
	border-bottom: 1px solid var(--eod-border-color);
	background: var(--eod-bg-color);
}

.eod-card-title {
	display: flex;
	align-items: center;
	gap: var(--eod-margin-sm);
}

.eod-item-code {
	font-weight: 600;
	font-size: var(--eod-text-md);
	color: var(--eod-heading-color);
}

.eod-type-badge {
	font-size: var(--eod-text-xs);
	padding: 2px 6px;
	border-radius: var(--eod-border-radius-sm);
	text-transform: uppercase;
	font-weight: 600;
}

.eod-type-filled {
	background: var(--eod-bg-green);
	color: var(--eod-text-on-green);
}

.eod-type-empty {
	background: var(--eod-bg-yellow);
	color: var(--eod-text-on-yellow);
}

.eod-type-defective {
	background: var(--eod-bg-red);
	color: var(--eod-text-on-red);
}

.eod-mismatch-indicator {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--eod-bg-orange);
	color: var(--eod-text-on-orange);
	border-radius: 50%;
	font-weight: bold;
	font-size: var(--eod-text-sm);
}

.eod-card-mismatch {
	border-color: var(--eod-warning);
}

.eod-card-body {
	padding: var(--eod-padding-md);
}

/* ==========================================================================
   STOCK SUMMARY
   ========================================================================== */
.eod-stock-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--eod-margin-md);
	padding: var(--eod-padding-sm);
	background: var(--eod-bg-color);
	border-radius: var(--eod-border-radius-sm);
}

.eod-stock-item {
	text-align: center;
	flex: 1;
}

.eod-stock-label {
	display: block;
	font-size: var(--eod-text-xs);
	color: var(--eod-text-muted);
	text-transform: uppercase;
	margin-bottom: 2px;
}

.eod-stock-value {
	font-size: var(--eod-text-lg);
	font-weight: 600;
	color: var(--eod-heading-color);
}

.eod-stock-arrow {
	color: var(--eod-text-muted);
	font-size: var(--eod-text-lg);
	padding: 0 var(--eod-padding-sm);
}

.eod-closing-mismatch .eod-stock-value {
	color: var(--eod-warning);
}

/* ==========================================================================
   MOVEMENTS
   ========================================================================== */
.eod-movements {
	border-top: 1px solid var(--eod-border-color);
	padding-top: var(--eod-padding-sm);
}

.eod-movements-title {
	font-size: var(--eod-text-xs);
	color: var(--eod-text-muted);
	text-transform: uppercase;
	margin-bottom: var(--eod-margin-xs);
}

.eod-movement-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 8px;
	margin: 2px 0;
	border-radius: var(--eod-border-radius-sm);
	font-size: var(--eod-text-sm);
}

.eod-movement-row.eod-clickable {
	cursor: pointer;
	transition: background 0.15s ease;
}

.eod-movement-row.eod-clickable:hover {
	background: var(--eod-bg-color);
}

.eod-movement-label {
	color: var(--eod-text-color);
}

.eod-movement-value {
	font-weight: 500;
	font-family: monospace;
}

.eod-positive {
	color: var(--eod-success);
}

.eod-negative {
	color: var(--eod-danger);
}

.eod-no-movements {
	text-align: center;
	color: var(--eod-text-muted);
	font-size: var(--eod-text-sm);
	padding: var(--eod-padding-sm);
}

/* ==========================================================================
   MISMATCH DETAIL
   ========================================================================== */
.eod-mismatch-detail {
	display: flex;
	justify-content: space-between;
	margin-top: var(--eod-margin-sm);
	padding: var(--eod-padding-xs) var(--eod-padding-sm);
	background: var(--eod-bg-orange);
	border-radius: var(--eod-border-radius-sm);
	font-size: var(--eod-text-xs);
	color: var(--eod-text-on-orange);
}

.eod-mismatch-diff {
	font-weight: 600;
}

/* ==========================================================================
   MISMATCH ALERT
   ========================================================================== */
.eod-mismatch-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--eod-margin-md);
	padding: var(--eod-padding-md);
	margin-top: var(--eod-margin-lg);
	background: var(--eod-bg-orange);
	border: 1px solid var(--eod-warning);
	border-radius: var(--eod-border-radius-md);
}

.eod-mismatch-alert-icon {
	font-size: 24px;
	line-height: 1;
}

.eod-mismatch-alert-content {
	flex: 1;
}

.eod-mismatch-alert-content strong {
	display: block;
	margin-bottom: var(--eod-margin-xs);
	color: var(--eod-text-on-orange);
}

.eod-mismatch-items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--eod-margin-xs);
}

.eod-mismatch-item {
	background: rgba(255,255,255,0.5);
	padding: 2px 8px;
	border-radius: var(--eod-border-radius-sm);
	font-size: var(--eod-text-sm);
}

/* ==========================================================================
   SECTIONS (Pending Returns, Unreconciled CRRs)
   ========================================================================== */
.eod-section {
	margin-top: var(--eod-margin-lg);
	background: var(--eod-card-bg);
	border: 1px solid var(--eod-border-color);
	border-radius: var(--eod-border-radius-lg);
	overflow: hidden;
}

.eod-section-header {
	display: flex;
	align-items: center;
	gap: var(--eod-margin-sm);
	padding: var(--eod-padding-sm) var(--eod-padding-md);
	background: var(--eod-bg-color);
	border-bottom: 1px solid var(--eod-border-color);
}

.eod-section-icon {
	font-size: var(--eod-text-lg);
}

.eod-section-title {
	font-weight: 600;
	font-size: var(--eod-text-md);
	color: var(--eod-heading-color);
}

.eod-section-body {
	padding: var(--eod-padding-md);
	overflow-x: auto;
}

.eod-pending-section {
	border-color: var(--eod-warning);
}

.eod-pending-section .eod-section-header {
	background: var(--eod-bg-orange);
}

.eod-unreconciled-section {
	border-color: var(--eod-info);
}

.eod-unreconciled-section .eod-section-header {
	background: var(--eod-bg-blue);
}

/* ==========================================================================
   DATA TABLE
   ========================================================================== */
.eod-data-table {
	width: 100%;
	margin: 0;
	font-size: var(--eod-text-sm);
	border-collapse: collapse;
}

.eod-data-table th {
	background: var(--eod-bg-color);
	font-weight: 600;
	white-space: nowrap;
	padding: 8px 10px;
	border-bottom: 2px solid var(--eod-border-color);
	text-align: left;
}

.eod-data-table td {
	padding: 8px 10px;
	vertical-align: middle;
	border-bottom: 1px solid var(--eod-border-color);
}

.eod-data-table tbody tr:hover {
	background: var(--eod-bg-color);
}

.eod-link {
	color: var(--eod-primary);
	text-decoration: none;
	font-weight: 500;
}

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

.eod-status-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: var(--eod-border-radius-sm);
	font-size: var(--eod-text-xs);
	font-weight: 500;
}

.eod-status-pending {
	background: var(--eod-bg-orange);
	color: var(--eod-text-on-orange);
}

.eod-status-partially-received {
	background: var(--eod-bg-yellow);
	color: var(--eod-text-on-yellow);
}

.eod-pending-item,
.eod-unreconciled-item {
	display: inline-block;
	padding: 1px 6px;
	margin: 1px;
	border-radius: var(--eod-border-radius-sm);
	font-size: var(--eod-text-xs);
	background: var(--eod-bg-gray);
}

.eod-unreconciled-item.eod-type-empty {
	background: var(--eod-bg-yellow);
	color: var(--eod-text-on-yellow);
}

.eod-unreconciled-item.eod-type-defective {
	background: var(--eod-bg-red);
	color: var(--eod-text-on-red);
}

/* ==========================================================================
   NO DATA / ERROR STATES
   ========================================================================== */
.eod-no-data {
	text-align: center;
	padding: var(--eod-padding-xl);
	color: var(--eod-text-muted);
}

.eod-error {
	text-align: center;
	padding: var(--eod-padding-xl);
	color: var(--eod-danger);
}

/* ==========================================================================
   DRILLDOWN TABLE (shared by both modal types)
   ========================================================================== */
.eod-drilldown-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--eod-margin-sm);
	padding: var(--eod-padding-lg);
	color: var(--eod-text-muted);
}

.eod-drilldown-table-wrapper {
	max-height: 400px;
	overflow-y: auto;
}

.eod-drilldown-table {
	width: 100%;
	margin: 0;
	font-size: var(--eod-text-sm);
	border-collapse: collapse;
}

.eod-drilldown-table th {
	position: sticky;
	top: 0;
	background: var(--eod-card-bg);
	border-bottom: 2px solid var(--eod-border-color);
	padding: 8px 10px;
	font-weight: 600;
	text-align: left;
	white-space: nowrap;
}

.eod-drilldown-table td {
	padding: 8px 10px;
	border-bottom: 1px solid var(--eod-border-color);
}

.eod-drilldown-table tbody tr:hover {
	background: var(--eod-bg-color);
}

.eod-drilldown-total {
	background: var(--eod-bg-color);
}

.eod-drilldown-total td {
	border-top: 2px solid var(--eod-border-color);
	font-weight: 600;
}

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

.eod-voucher-link:hover {
	text-decoration: underline;
}

.eod-drilldown-empty,
.eod-drilldown-error {
	text-align: center;
	padding: var(--eod-padding-lg);
	color: var(--eod-text-muted);
}

.eod-drilldown-error {
	color: var(--eod-danger);
}

/* ==========================================================================
   WEB MODAL (for web context only)
   ========================================================================== */
.eod-modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.5);
	z-index: 1050;
	display: flex;
	align-items: center;
	justify-content: center;
}

.eod-modal {
	background: var(--eod-card-bg);
	border-radius: var(--eod-border-radius-lg);
	max-width: 900px;
	width: 90%;
	max-height: 80vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.eod-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 20px;
	border-bottom: 1px solid var(--eod-border-color);
}

.eod-modal-title {
	font-size: 16px;
	font-weight: 600;
	margin: 0;
	color: var(--eod-heading-color);
}

.eod-modal-close {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: var(--eod-text-muted);
	line-height: 1;
	padding: 0;
}

.eod-modal-close:hover {
	color: var(--eod-heading-color);
}

.eod-modal-body {
	padding: 20px;
	overflow-y: auto;
	flex: 1;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
	.eod-item-cards {
		grid-template-columns: 1fr;
	}

	.eod-header-info {
		flex-direction: column;
		align-items: flex-start;
	}

	.eod-section-body {
		padding: var(--eod-padding-sm);
	}

	.eod-web-filters .row > div {
		margin-bottom: 10px;
	}
}

/* ==========================================================================
   TEXT ALIGNMENT UTILITIES
   ========================================================================== */
.text-right {
	text-align: right;
}

.text-center {
	text-align: center;
}