/* ==========================================================================
   SP Euribor Calendar — Frontend Styles
   Version: 1.0.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties — tema claro (default)
   -------------------------------------------------------------------------- */
.sp-euribor-wrap {
	--sp-euribor-bg:           #ffffff;
	--sp-euribor-text:         #333333;
	--sp-euribor-border:       #e0e0e0;
	--sp-euribor-header-bg:    #f8f9fa;
	--sp-euribor-header-text:  #111111;

	--sp-euribor-up-bg:        #fde8e8;
	--sp-euribor-up-text:      #c0392b;
	--sp-euribor-down-bg:      #e8fde8;
	--sp-euribor-down-text:    #27ae60;
	--sp-euribor-equal-bg:     #f0f0f0;
	--sp-euribor-equal-text:   #555555;

	--sp-euribor-weekend-bg:   #f5f5f5;
	--sp-euribor-weekend-text: #999999;
	--sp-euribor-nodata-bg:    #fafafa;
	--sp-euribor-nodata-text:  #bbbbbb;
	--sp-euribor-future-bg:    #fafafa;
	--sp-euribor-future-text:  #cccccc;
	--sp-euribor-empty-bg:     transparent;

	--sp-euribor-nav-bg:       #f0f0f0;
	--sp-euribor-nav-hover:    #d8d8d8;
	--sp-euribor-nav-text:     #333333;

	--sp-euribor-footer-border: #e0e0e0;
	--sp-euribor-footer-bg:     #f8f9fa;
	--sp-euribor-disclaimer:    #888888;

	--sp-euribor-radius:       6px;
	--sp-euribor-cell-padding: 8px 4px;
	--sp-euribor-font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   CSS Custom Properties — tema oscuro
   -------------------------------------------------------------------------- */
.sp-euribor-wrap[data-theme="oscuro"] {
	--sp-euribor-bg:           #1e1e1e;
	--sp-euribor-text:         #e0e0e0;
	--sp-euribor-border:       #444444;
	--sp-euribor-header-bg:    #2a2a2a;
	--sp-euribor-header-text:  #f0f0f0;

	--sp-euribor-up-bg:        #4a1a1a;
	--sp-euribor-up-text:      #ff7070;
	--sp-euribor-down-bg:      #1a4a1a;
	--sp-euribor-down-text:    #70ff70;
	--sp-euribor-equal-bg:     #2a2a2a;
	--sp-euribor-equal-text:   #aaaaaa;

	--sp-euribor-weekend-bg:   #252525;
	--sp-euribor-weekend-text: #666666;
	--sp-euribor-nodata-bg:    #222222;
	--sp-euribor-nodata-text:  #555555;
	--sp-euribor-future-bg:    #222222;
	--sp-euribor-future-text:  #444444;
	--sp-euribor-empty-bg:     transparent;

	--sp-euribor-nav-bg:       #333333;
	--sp-euribor-nav-hover:    #444444;
	--sp-euribor-nav-text:     #e0e0e0;

	--sp-euribor-footer-border: #444444;
	--sp-euribor-footer-bg:     #252525;
	--sp-euribor-disclaimer:    #666666;
}

/* --------------------------------------------------------------------------
   Loading state (applied via JS classList, not inline styles)
   -------------------------------------------------------------------------- */
.sp-euribor-wrap.sp-euribor-loading {
	opacity:        0.5;
	pointer-events: none;
	cursor:         wait;
}

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.sp-euribor-wrap {
	background-color: var(--sp-euribor-bg);
	color:            var(--sp-euribor-text);
	border:           1px solid var(--sp-euribor-border);
	border-radius:    var(--sp-euribor-radius);
	overflow:         hidden;
	font-family:      var(--sp-euribor-font);
	font-size:        16px;
	max-width:        100%;
	box-sizing:       border-box;
}

.sp-euribor-wrap *,
.sp-euribor-wrap *::before,
.sp-euribor-wrap *::after {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Header & Navigation
   -------------------------------------------------------------------------- */
.sp-euribor-header {
	display:          flex;
	align-items:      center;
	justify-content:  space-between;
	background-color: var(--sp-euribor-header-bg);
	border-bottom:    1px solid var(--sp-euribor-border);
	padding:          10px 12px;
	gap:              8px;
}

.sp-euribor-title-wrap {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             6px;
	flex:            1;
}

.sp-euribor-month-select,
.sp-euribor-year-select {
	background-color: var(--sp-euribor-bg);
	color:            var(--sp-euribor-header-text);
	border:           1px solid var(--sp-euribor-border);
	border-radius:    4px;
	padding:          4px 6px;
	font-size:        15px;
	font-weight:      600;
	font-family:      var(--sp-euribor-font);
	cursor:           pointer;
	appearance:       auto;
}

.sp-euribor-month-select:focus,
.sp-euribor-year-select:focus {
	outline: 2px solid #4a90d9;
	outline-offset: 1px;
}

.sp-euribor-nav {
	background:    var(--sp-euribor-nav-bg);
	color:         var(--sp-euribor-nav-text);
	border:        1px solid var(--sp-euribor-border);
	border-radius: 4px;
	padding:       6px 12px;
	cursor:        pointer;
	font-size:     15px;
	line-height:   1;
	transition:    background 0.15s ease;
	flex-shrink:   0;
}

.sp-euribor-nav:hover:not(:disabled) {
	background: var(--sp-euribor-nav-hover);
}

.sp-euribor-nav:disabled,
.sp-euribor-nav-disabled {
	opacity: 0.35;
	cursor:  not-allowed;
}

/* --------------------------------------------------------------------------
   Calendar table
   -------------------------------------------------------------------------- */
.sp-euribor-calendar {
	width:           100%;
	border-collapse: collapse;
	table-layout:    fixed;
}

/* Day-of-week headers */
.sp-euribor-wrap .sp-euribor-calendar thead th {
	background-color: var(--sp-euribor-header-bg) !important;
	color:            var(--sp-euribor-header-text) !important;
	font-size:        14px;
	font-weight:      600;
	text-transform:   uppercase;
	letter-spacing:   0.04em;
	text-align:       center;
	padding:          8px 2px;
	border-bottom:    1px solid var(--sp-euribor-border);
}

.sp-euribor-wrap .sp-euribor-calendar thead th.sp-euribor-weekend {
	color: var(--sp-euribor-weekend-text) !important;
}

/* Mobile abbreviations: hidden by default, shown on small screens */
.sp-euribor-day-abbr { display: none; }

/* Cells — base style */
.sp-euribor-wrap .sp-euribor-calendar td.sp-euribor-day {
	text-align:       center;
	vertical-align:   top;
	padding:          var(--sp-euribor-cell-padding);
	border:           1px solid var(--sp-euribor-border) !important;
	height:           70px;
	position:         relative;
	transition:       filter 0.1s ease;
	background-color: var(--sp-euribor-bg) !important;
}

.sp-euribor-day-num {
	display:     block;
	font-size:   14px;
	font-weight: 400;
	color:       var(--sp-euribor-text);
	opacity:     0.55;
	line-height: 1.2;
}

.sp-euribor-day-val {
	display:     block;
	font-size:   17px;
	font-weight: 700;
	line-height: 1.3;
	margin-top:  4px;
}

/* --- Up (red) ------------------------------------------------------------ */
.sp-euribor-wrap .sp-euribor-calendar td.sp-euribor-up {
	background-color: var(--sp-euribor-up-bg) !important;
}
.sp-euribor-wrap .sp-euribor-calendar td.sp-euribor-up .sp-euribor-day-val {
	color: var(--sp-euribor-up-text);
}
.sp-euribor-wrap .sp-euribor-calendar td.sp-euribor-up .sp-euribor-day-val::after {
	content:   " ▲";
	font-size: 11px;
	opacity:   0.8;
}
.sp-euribor-wrap .sp-euribor-calendar td.sp-euribor-up:hover {
	filter: brightness(0.95);
}

/* --- Down (green) -------------------------------------------------------- */
.sp-euribor-wrap .sp-euribor-calendar td.sp-euribor-down {
	background-color: var(--sp-euribor-down-bg) !important;
}
.sp-euribor-wrap .sp-euribor-calendar td.sp-euribor-down .sp-euribor-day-val {
	color: var(--sp-euribor-down-text);
}
.sp-euribor-wrap .sp-euribor-calendar td.sp-euribor-down .sp-euribor-day-val::after {
	content:   " ▼";
	font-size: 11px;
	opacity:   0.8;
}
.sp-euribor-wrap .sp-euribor-calendar td.sp-euribor-down:hover {
	filter: brightness(0.95);
}

/* --- Equal (neutral) ----------------------------------------------------- */
.sp-euribor-wrap .sp-euribor-calendar td.sp-euribor-equal {
	background-color: var(--sp-euribor-equal-bg) !important;
}
.sp-euribor-wrap .sp-euribor-calendar td.sp-euribor-equal .sp-euribor-day-val {
	color: var(--sp-euribor-equal-text);
}
.sp-euribor-wrap .sp-euribor-calendar td.sp-euribor-equal .sp-euribor-day-val::after {
	content:   " =";
	font-size: 11px;
	opacity:   0.6;
}

/* --- Weekend ------------------------------------------------------------- */
.sp-euribor-wrap .sp-euribor-calendar td.sp-euribor-weekend-cell {
	background-color: var(--sp-euribor-weekend-bg) !important;
}
.sp-euribor-wrap .sp-euribor-calendar td.sp-euribor-weekend-cell .sp-euribor-day-num {
	color: var(--sp-euribor-weekend-text);
}

/* --- No data (holiday on a weekday) ------------------------------------- */
.sp-euribor-wrap .sp-euribor-calendar td.sp-euribor-nodata {
	background-color: var(--sp-euribor-nodata-bg) !important;
}
.sp-euribor-wrap .sp-euribor-calendar td.sp-euribor-nodata .sp-euribor-day-val {
	color:   var(--sp-euribor-nodata-text);
	opacity: 0.6;
}

/* --- Future ------------------------------------------------------------- */
.sp-euribor-wrap .sp-euribor-calendar td.sp-euribor-future {
	background-color: var(--sp-euribor-future-bg) !important;
}
.sp-euribor-wrap .sp-euribor-calendar td.sp-euribor-future .sp-euribor-day-num {
	color: var(--sp-euribor-future-text);
}

/* --- Empty padding cells ------------------------------------------------ */
.sp-euribor-wrap .sp-euribor-calendar td.sp-euribor-empty {
	background-color: var(--sp-euribor-empty-bg) !important;
	border-color:     transparent !important;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.sp-euribor-footer {
	background-color: var(--sp-euribor-footer-bg);
	border-top:       2px solid var(--sp-euribor-footer-border);
	padding:          12px 16px;
}

.sp-euribor-media {
	margin:      0 0 4px;
	font-size:   16px;
	font-weight: 400;
	color:       var(--sp-euribor-text);
}

.sp-euribor-media strong {
	font-size:   18px;
	font-weight: 700;
}

.sp-euribor-media-note {
	font-size:  14px;
	color:      var(--sp-euribor-disclaimer);
	font-style: italic;
}

.sp-euribor-media-empty {
	color: var(--sp-euribor-nodata-text);
}

.sp-euribor-disclaimer {
	margin:    4px 0 0;
	font-size: 13px;
	color:     var(--sp-euribor-disclaimer);
}


/* --------------------------------------------------------------------------
   Mobile: screens narrower than 600px
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.sp-euribor-wrap {
		font-size: 14px;
	}

	.sp-euribor-month-select,
	.sp-euribor-year-select {
		font-size: 13px;
		padding:   3px 4px;
	}

	/* Show abbreviated day names; hide full names */
	.sp-euribor-day-full { display: none; }
	.sp-euribor-day-abbr { display: inline; }

	.sp-euribor-wrap .sp-euribor-calendar td.sp-euribor-day {
		padding: 4px 2px;
		height:  58px;
	}

	.sp-euribor-day-num {
		font-size: 13px;
	}

	.sp-euribor-day-val {
		font-size:  14px;
		margin-top: 2px;
	}

	.sp-euribor-media {
		font-size: 14px;
	}

	.sp-euribor-media strong {
		font-size: 16px;
	}

	.sp-euribor-media-note {
		font-size: 13px;
	}
}

/* Extra small: below 400px */
@media (max-width: 400px) {
	.sp-euribor-wrap .sp-euribor-calendar td.sp-euribor-day {
		height: 50px;
	}

	.sp-euribor-day-val {
		font-size: 13px;
	}

	.sp-euribor-day-val::after {
		display: none;
	}
}