/* Owner Cabins (stuguthyrning) — horizontal booking timeline. Frame (.b-card)
   injected at runtime. Tokens only. JS sets per-day/column pixel widths inline;
   this file styles the chrome, the sticky accommodation column and the bars. */

.oc.b-card{ padding:var(--card-pad); }

.oc__title{
	font-family:var(--font-display); font-weight:var(--display-w);
	letter-spacing:var(--display-ls); line-height:1.1;
	font-size:1.35rem; color:var(--ink); margin:.15rem 0 .35rem;
}
.oc__intro{ margin:0 0 .9rem; color:var(--ink-soft); font-size:.92rem; line-height:1.5; }

/* Legend */
.oc__legend{ display:flex; flex-wrap:wrap; gap:14px; margin:0 0 .8rem; font-size:.82rem; color:var(--ink-soft); }
.oc__legend-item{ display:flex; align-items:center; gap:7px; }
.oc__legend-swatch{ width:20px; height:13px; border-radius:3px; display:inline-block; }

/* Scroll viewport */
.oc__scroll{
	overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
	border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface);
}

/* Header */
.oc__head{ display:flex; border-bottom:1px solid var(--line); }
.oc__corner{
	flex:0 0 auto; height:44px; position:sticky; left:0; z-index:6;
	background:var(--surface); border-right:1px solid var(--line);
}
.oc__headtrack{ position:relative; flex:0 0 auto; }
.oc__months{ position:relative; height:20px; }
.oc__month{
	position:absolute; top:0; height:20px; display:flex; align-items:center;
	padding:0 6px; font-size:.66rem; font-weight:700; color:var(--ink);
	text-transform:uppercase; letter-spacing:.04em;
	border-left:1px solid var(--line); box-sizing:border-box; white-space:nowrap; overflow:hidden;
}
.oc__days{ display:flex; height:24px; border-top:1px solid var(--line); }
.oc__day{
	flex:0 0 auto; display:flex; align-items:center; justify-content:center;
	font-family:var(--font-mono, monospace); font-size:.62rem; color:var(--muted);
	box-sizing:border-box; border-right:1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.oc__day.is-we{ background:var(--surface2); color:var(--ink-soft); }
.oc__day.is-today{ color:var(--accent); font-weight:700; box-shadow:inset 0 -2px 0 var(--accent); }
.oc__day.is-past{ opacity:.5; }

/* Rows */
.oc__row{ display:flex; }
.oc__row + .oc__row{ border-top:1px solid var(--line); }
.oc__rowlabel{
	flex:0 0 auto; position:sticky; left:0; z-index:5;
	display:flex; flex-direction:column; justify-content:center; gap:1px;
	padding:0 10px; background:var(--surface); border-right:1px solid var(--line);
	box-sizing:border-box;
}
.oc__rowname{ font-weight:600; font-size:.86rem; color:var(--ink); line-height:1.15; }
.oc__rowcat{ font-size:.7rem; color:var(--muted); line-height:1.1; }

.oc__track{ position:relative; flex:0 0 auto; display:flex; height:40px; }
.oc__cell{
	flex:0 0 auto; height:100%; box-sizing:border-box; cursor:pointer;
	border-right:1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.oc__cell.is-we{ background:var(--surface2); }
.oc__cell.is-today{ box-shadow:inset 2px 0 0 var(--accent); }
.oc__cell.is-past{ cursor:default; background:repeating-linear-gradient(45deg, transparent, transparent 4px, color-mix(in srgb, var(--line) 35%, transparent) 4px, color-mix(in srgb, var(--line) 35%, transparent) 8px); }
.oc__cell.is-sel{ background:color-mix(in srgb, var(--accent) 24%, transparent); }
.oc__cell:not(.is-past):hover{ background:color-mix(in srgb, var(--accent) 10%, transparent); }

/* Booking bars (positioned over the cells) */
.oc__bar{
	position:absolute; top:7px; height:26px; z-index:1;
	display:flex; align-items:center; gap:4px; padding:0 6px;
	border-radius:5px; font-size:.7rem; line-height:1; overflow:hidden;
	box-sizing:border-box; white-space:nowrap;
}
.oc__bar--guest{ background:color-mix(in srgb, var(--ink) 16%, var(--surface)); color:var(--ink); border:1px solid color-mix(in srgb, var(--ink) 22%, transparent); cursor:default; }
.oc__bar--owner{ background:var(--accent); color:var(--on-accent); border:1px solid var(--accent); }
.oc__bar-label{ overflow:hidden; text-overflow:ellipsis; }
.oc__bar-x{
	flex:0 0 auto; margin-left:auto; border:0; background:rgba(255,255,255,.22);
	color:inherit; cursor:pointer; width:16px; height:16px; border-radius:999px;
	font-size:.66rem; line-height:1; display:grid; place-items:center; padding:0;
}
.oc__bar-x:hover{ background:rgba(255,255,255,.4); }

/* Legend swatches reuse the bar colours */
.oc__legend-swatch.oc__bar--guest{ border:1px solid color-mix(in srgb, var(--ink) 22%, transparent); }

/* Bottom action area (hint / booking confirm / removal confirm) */
.oc__action{ margin-top:14px; padding:11px 13px; background:var(--surface2); border-radius:var(--radius-sm); }
.oc__action-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.oc__action-msg{ font-size:.9rem; color:var(--ink); margin-right:auto; }
.oc__action-msg--error{ color:var(--no); }

/* Go-to-date shortcut above the timeline */
.oc__controls{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 10px; }
.oc__goto{ display:flex; align-items:center; gap:8px; }
.oc__goto-label{ font-size:.82rem; font-weight:600; color:var(--ink-soft); }
.oc__goto-input.b-input{ width:auto; height:38px; }

/* "Boka / Book" datepicker flow below the timeline */
.oc__bookbar{ margin-top:14px; }
.oc__bookform{
	margin-top:12px; padding:14px; max-width:420px;
	background:var(--surface2); border-radius:var(--radius-sm);
	display:flex; flex-direction:column; gap:12px;
}
.oc__bookform .b-field{ margin:0; }
.oc__bookform-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.oc__bookform-msg{ font-size:.86rem; color:var(--ink-soft); }
.oc__bookform-msg.is-error{ color:var(--no); }

/* Range calendar (past + booked nights disabled) */
.oc__cal{ max-width:300px; }
.oc__cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.oc__cal-month{ font-weight:700; font-size:.95rem; color:var(--ink); text-transform:capitalize; }
.oc__cal-nav{ width:30px; height:30px; flex:0 0 auto; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); cursor:pointer; display:grid; place-items:center; font-size:1rem; line-height:1; padding:0; }
.oc__cal-nav:hover{ border-color:var(--accent); color:var(--accent); }
.oc__cal-wd{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:2px; }
.oc__cal-wd span{ text-align:center; font-size:.66rem; color:var(--muted); font-weight:600; }
.oc__cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.oc__cal-day{
	aspect-ratio:1/1; display:grid; place-items:center; padding:0;
	border:1px solid transparent; border-radius:var(--radius-sm);
	background:var(--surface); color:var(--ink); font-size:.8rem; cursor:pointer;
}
.oc__cal-day.is-empty{ background:transparent; border:0; cursor:default; }
.oc__cal-day:not(:disabled):hover{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); }
.oc__cal-day:disabled{ cursor:not-allowed; }
.oc__cal-day.is-past{ color:var(--muted); opacity:.45; background:transparent; }
.oc__cal-day.is-booked{
	color:var(--muted); text-decoration:line-through;
	background:repeating-linear-gradient(45deg, transparent, transparent 3px, color-mix(in srgb, var(--line) 50%, transparent) 3px, color-mix(in srgb, var(--line) 50%, transparent) 6px);
}
.oc__cal-day.is-inrange{ background:color-mix(in srgb, var(--accent) 16%, transparent); border-radius:0; }
.oc__cal-day.is-arr, .oc__cal-day.is-dep{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }

/* Mobile: give the wide timeline the full screen width. The card goes
   edge-to-edge (full-bleed out of the page gutter, no side chrome); the content
   wrapper keeps a small gutter for text; the scroll track breaks back out so it
   uses every pixel. */
@media (max-width:768px){
	.oc.b-card{
		width:100vw; max-width:100vw;
		margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
		padding-left:0; padding-right:0;
		border-left:0; border-right:0; border-radius:0;
	}
	.oc__mount{ padding-left:12px; padding-right:12px; }
	.oc__scroll{ margin-left:-12px; margin-right:-12px; border-left:0; border-right:0; border-radius:0; }
}