/* Apartment Reservations – front‑end styles
   soft palette · black text · accurate half‑day rendering              */

/* ─────────────  FULL‑DAY STATES  ───────────── */

:root{
  --pending: #f69988; /*#ffe38a*/
  --confirmed: #f69988; /*#f69988*/
}

/* interior nights of confirmed bookings */
.flatpickr-day.ar-day-confirmed{
   background:var(--confirmed)  !important;   /* soft red */
   color:#000 !important;
 }
 

 .flatpickr-day.ar-day-pending{
   background:var(--pending)  !important;   /* soft yellow */
   color:#000 !important;
 }
 
 /* completely free nights */
 .flatpickr-day.ar-day-free{
   background:#c9e9d2 !important;   /* soft green */
   color:#000 !important;
 }
 
 
 /* ────────────  SINGLE HALF‑DAY BOUNDARIES  ────────────
    busy half (red / yellow) • free half (green)           */
 
 .flatpickr-day.ar-day-confirmed-start{
   background:#c9e9d2 !important;                                           /* base green */
   background-image:linear-gradient(135deg,transparent 50%,var(--confirmed)  0) !important;
   background-size: 200% 200% !important;
   background-position: center !important;
   color:#000 !important;
 }
 .flatpickr-day.ar-day-confirmed-end{
   background:#c9e9d2 !important;
   background-image:linear-gradient(315deg,transparent 50%,var(--confirmed)  0) !important;
   background-size: 200% 200% !important;
   background-position: center !important;
   color:#000 !important;
 }
 .flatpickr-day.ar-day-pending-start{
   background:#c9e9d2 !important;
   background-image:linear-gradient(135deg,transparent 50%,var(--pending)  0) !important;
   background-size: 200% 200% !important;
   background-position: center !important;
   color:#000 !important;
 }
 .flatpickr-day.ar-day-pending-end{
   background:#c9e9d2 !important;
   background-image:linear-gradient(315deg,transparent 50%,var(--pending)  0) !important;
   background-size: 200% 200% !important;
   background-position: center !important;
   color:#000 !important;
 }
 
 
/* ────────────  DUAL‑BOUNDARY CELLS (clean triangles) ──────────── */

/* same state on both halves → full busy colour */
.flatpickr-day.ar-day-confirmed-start.ar-day-confirmed-end{
   background:var(--confirmed)  !important;
 }
 .flatpickr-day.ar-day-pending-start.ar-day-pending-end{
   background:var(--pending)  !important;
 }
 
 /* mixed: confirmed END (top-left) + pending START (bottom-right) */
 .flatpickr-day.ar-day-confirmed-end.ar-day-pending-start {
   background:linear-gradient(135deg, var(--confirmed)  50%, var(--pending)  50%) !important;
   background-size: 200% 200% !important;
   background-position: center !important;
   color:#000 !important;
 }
 
 /* mixed: pending END (top-left) + confirmed START (bottom-right) */
 .flatpickr-day.ar-day-pending-end.ar-day-confirmed-start {
   background:linear-gradient(135deg, var(--pending)  50%, var(--confirmed)  50%) !important;
   background-size: 200% 200% !important;
   background-position: center !important;
   color:#000 !important;
 }
 
 
 
 /* ─────────────  ADMIN BADGES (unchanged)  ───────────── */
 
 .ar-badge{
   display:inline-block;
   padding:.15em .35em;
   font-size:.75em;
   line-height:1;
   border-radius:.25em;
   color:#fff;
 }
 .ar-badge-confirmed { background:#e74c3c }
 .ar-badge-paid      { background:#27ae60 }
 .ar-badge-in        { background:#2980b9 }
 .ar-badge-out       { background:#8e44ad }
 .ar-badge-cancelled { background:#7f8c8d }
 .ar-badge-archived  { background:#95a5a6 }
 
 
 /* dim buttons already applied in the admin table */
 .ar-admin-form button[disabled]{
   opacity:.35;
   cursor:default;
 }
 
 /* Availability matrix -------------------------------------------------*/
/* Overview – remove horizontal scroll */
.ar-overview-wrapper{ overflow-x:visible; }

/* Make linked cells feel clickable on hover */
.ar-overview td:hover{
	outline:2px solid #333;
	outline-offset:-2px;
	cursor:pointer;
}
.ar-overview th a:hover{
	text-decoration:underline;
}

/* keep your existing colour classes */
.ar-day-confirmed{ background:var(--confirmed) ; }
.ar-day-pending  { background:var(--pending) ; }
.ar-day-free     { background:#c9e9d2; }


.ar-overview{
	border-collapse:collapse;
  table-layout: fixed;
	font-size:0.875rem;
	min-width:300px;          /* force horizontal scroll on phones   */
}

.ar-overview th,
.ar-overview td{
	border:1px solid #e1e1e1;
	padding:0;
	text-align:center;
	min-width:2rem;
}

.ar-overview th:first-child{
	position:sticky; left:0;
	z-index:2;
	font-weight:600;
}

.ar-day-confirmed{ background:var(--confirmed) ; }  /* soft red   */
.ar-day-pending  { background:var(--pending) ; }  /* soft yellow*/
.ar-day-free     { background:#c9e9d2; }  /* soft green */


/* ─── Half-day triangles for the overview grid ─────────────────── */

/* confirmed booking – first night (busy right-half) */
.ar-overview td.ar-day-confirmed-start{
    background:#c9e9d2;
    background-image:linear-gradient(135deg,transparent 50%,var(--confirmed)  0);
    background-size:200% 200%;
    background-position:center;
}

/* confirmed booking – last night (busy left-half) */
.ar-overview td.ar-day-confirmed-end{
    background:#c9e9d2;
    background-image:linear-gradient(315deg,transparent 50%,var(--confirmed)  0);
    background-size:200% 200%;
    background-position:center;
}

/* pending booking – first night */
.ar-overview td.ar-day-pending-start{
    background:#c9e9d2;
    background-image:linear-gradient(135deg,transparent 50%,var(--pending)  0);
    background-size:200% 200%;
    background-position:center;
}

/* pending booking – last night */
.ar-overview td.ar-day-pending-end{
    background:#c9e9d2;
    background-image:linear-gradient(315deg,transparent 50%,var(--pending)  0);
    background-size:200% 200%;
    background-position:center;
}

/* full-colour rectangles when both flags land in one cell
   (back-to-back or 1-night stay)                              */
.ar-overview td.ar-day-confirmed-start.ar-day-confirmed-end{
    background:var(--confirmed) ;
}
.ar-overview td.ar-day-pending-start.ar-day-pending-end{
    background:var(--pending) ;
}
/* mixed adjacency: pending→confirmed / confirmed→pending */
.ar-overview td.ar-day-confirmed-end.ar-day-pending-start{
    background:linear-gradient(135deg,var(--confirmed)  50%,var(--pending)  50%);
    background-size:200% 200%;
    background-position:center;
}
.ar-overview td.ar-day-pending-end.ar-day-confirmed-start{
    background:linear-gradient(135deg,var(--pending)  50%,var(--confirmed)  50%);
    background-size:200% 200%;
    background-position:center;
}


/* ───── Overview layout tweaks ──────────────────────────────────── */
/* ─── Keep every row exactly 2 rem high ───────────────────────────*/
.ar-overview th:first-child{
    width:8rem;                 /* you already have this              */
    height:2rem;                /* hard-limits the row height         */
    line-height:2rem;           /* centres the text vertically        */

    overflow:hidden;            /* prevent extra lines                */
    white-space:nowrap;         /* no wrapping                        */
    text-overflow:ellipsis;     /* “…” if it’s too long               */
}

/* optional: underline so users know it’s a link */
.ar-overview th:first-child a:hover{
    text-decoration:underline;
}

/* Hide the anchor’s underline + text */
.ar-overview td a{
    text-decoration:none;   /* kill underline */
    font-size:0;            /*   now takes zero space */
    line-height:0;
}

/* Keep table width exactly as declared (borders included) */
.ar-overview th,
.ar-overview td{
  	border: 1px solid #e1e1e1;
    box-sizing:border-box;
    padding: 0;
}

/* ─── Center the overview calendar header ───────────────────────── */
.ar-overview-nav{
    display:flex;               /* one row                             */
    justify-content:center;     /* centres the whole group             */
    align-items:center;         /* vertical align for the buttons      */
    gap:.75rem;                 /* same spacing you already used       */
    margin-bottom:.5rem;        /* keep the existing offset            */
}

.ar-overview thead th[colspan] {
	text-align: center;
	font-weight: bold;
	background: #e1e1e1;
}

.ar-overview thead .ar-weekend {
	background: #f0f0f0;
	/*color: #444;*/
	font-weight: bold;
}

.ar-overview thead th {
	line-height: 1.2;
	font-size: 0.8rem;
	text-align: center;
}

.ar-overview th:not(:first-child),
.ar-overview td {
	width: 2rem;
	height: 2rem;
}


/* Keep the vivid blue border on all interior cells of a range */
.flatpickr-day.inRange{
    border-color:#569ff7 !important;
    box-shadow:-6px 0 0 #569ff7,
                6px 0 0 #569ff7 !important;
}

/* If you still want your booking colours inside ranges,
   re-apply them *without* losing the outline              */
   /*
.flatpickr-day.inRange.ar-day-free       { background:#c9e9d2 !important; }
.flatpickr-day.inRange.ar-day-confirmed  { background:var(--confirmed)  !important; color:#000 !important; }
.flatpickr-day.inRange.ar-day-pending    { background:var(--pending)  !important; color:#000 !important; }
*/

.ar-apt-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 1rem 0;
}

.ar-apt-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.ar-apt-thumb img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.ar-apt-thumb:hover img {
    transform: scale(1.05);
}

.ar-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
}

.ar-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

@media (min-width: 600px) {
  .ar-form {
    grid-template-columns: 1fr 1fr;
  }

  .ar-form .ar-wide {
    grid-column: 1 / -1;
  }

  .ar-field {
    flex-direction: row;
    align-items: center;
  }

  .ar-field label {
    width: 150px;
    flex-shrink: 0;
    text-align: right;
    margin-right: 1rem;
  }

  .ar-input-wrapper {
    flex: 1;
  }
}

.ar-required {
  color: red;
  font-weight: bold;
}

.ar-calendar .ar-form .ar-field {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

.ar-calendar .ar-form .ar-field {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.ar-calendar .ar-form .ar-field label {
  width: 150px;
  flex-shrink: 0;
  text-align: right;
  margin-right: 1rem;
}

.ar-calendar .ar-form .ar-input-wrapper {
  flex: 1;
}