/* File: components/primitives/tiles/public/css/tiles.css */

/***********************
* TILE START
***********************/

/* Tile component (Bootstrap-style, modeled after .card) */
.tile{
  /* Scoped vars */
  --tile-min-height: 140px;
  --tile-padding-y: 16px;
  --tile-padding-x: 14px;
  --tile-padding-bottom: 42px; /* space for actions/hint */
  --tile-radius: 0.5rem;

  --tile-bg: rgba(var(--color-abyssal),1);
  --tile-border-width: 0; /* keep 0; visuals are handled by box-shadow states below */
  --tile-border-style: var(--border-style);
  --tile-border-color: rgba(var(--border-color), 0.25);
  --tile-border-color-hover: rgba(var(--border-color), 0.5);
  --tile-border-color-focus: rgba(var(--border-color), 0.75);

  --tile-text-dim: rgba(255,255,255,0.72);

  --tile-chip-top: 8px;
  --tile-chip-left: 10px;
  --tile-chip-font-size: 10px;
  --tile-chip-letter-spacing: .14em;
  --tile-chip-text: rgba(var(--color-luminaris), 1);
  --tile-chip-border: 1px solid rgba(94,225,255,0.35);
  --tile-chip-bg: rgba(94,225,255,0.06);
  --tile-chip-radius: 3px;
  --tile-chip-padding: 3px 6px 2px;

  --tile-info-margin-top: 22px;
  --tile-desc-font-size: 13px;
  --tile-desc-line-height: 1.25;

  --tile-actions-left: 12px;
  --tile-actions-right: 12px;
  --tile-actions-bottom: 10px;
  --tile-hint-font-size: 11px;
  --tile-hint-opacity: .75;

  --tile-caret-right: 12px;
  --tile-caret-bottom: 10px;
  --tile-caret-font-size: 18px;
  --tile-caret-color: var(--tile-text-dim);

  --tile-tx-fast: .18s ease;
  --tile-tx-tiny: .06s ease;

  position: relative;
  height: 100%;
  min-height: var(--tile-min-height);
  padding: var(--tile-padding-y) var(--tile-padding-x) var(--tile-padding-bottom);
  background-color: var(--tile-bg);
  border: var(--tile-border-width) var(--tile-border-style) var(--tile-border-color);
  border-radius: var(--tile-radius);
  color: rgba(var(--body-color));
  cursor: pointer;
  user-select: none;
  outline: 0;
  transition:
    border-color var(--tile-tx-fast),
    box-shadow var(--tile-tx-fast),
    transform var(--tile-tx-tiny);
}

/* Responsive overrides (same pattern Bootstrap uses) */
@media (max-width: 575.98px){
  .tile{
    --tile-min-height: 130px;
    --tile-padding-y: 14px;
    --tile-padding-x: 12px;
    --tile-padding-bottom: 38px;
    --tile-desc-font-size: 12px;
    --tile-caret-font-size: 16px;
    --tile-caret-bottom: 8px;
  }
}

/* Hover / Focus / Active */
.tile:hover{ border-color: var(--tile-border-color-hover); }
.tile:focus{ border-color: var(--tile-border-color-focus); }
.tile:active{ transform: translateY(1px); }

/* Disabled */
.tile-disabled,
.tile[aria-disabled="true"]{
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}
.tile-disabled:hover,
.tile[aria-disabled="true"]:hover{
  background-color: var(--tile-bg);
  border-color: var(--tile-border-color);
  box-shadow: none;
}

/* Elements */
.tile-header{
  position: absolute;
  top: var(--tile-chip-top);
  left: var(--tile-chip-left);
}
.tile-header > span{
  display: inline-block;
  font-size: var(--tile-chip-font-size);
  line-height: 1;
  letter-spacing: var(--tile-chip-letter-spacing);
  text-transform: uppercase;
  color: var(--tile-chip-text);
  padding: var(--tile-chip-padding);
  border: var(--tile-chip-border);
  background: var(--tile-chip-bg);
  border-radius: var(--tile-chip-radius);
}

.tile-body{
  margin-top: var(--tile-info-margin-top);
  color: var(--tile-text-dim);
}
.tile-desc{
  font-size: var(--tile-desc-font-size);
  line-height: var(--tile-desc-line-height);
}

.tile-actions{
  position: absolute;
  left: var(--tile-actions-left);
  right: var(--tile-actions-right);
  bottom: var(--tile-actions-bottom);
}
.tile-action.btn{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.tile-hint{
  display: inline-block;
  font-size: var(--tile-hint-font-size);
  line-height: 1.2;
  color: var(--tile-text-dim);
  opacity: var(--tile-hint-opacity);
}
.tile-hint::before{ content: none !important; }

/* Caret */
.tile-caret{
  position: absolute;
  right: var(--tile-caret-right);
  bottom: var(--tile-caret-bottom);
  font-size: var(--tile-caret-font-size);
  line-height: 1;
  color: var(--tile-caret-color);
  pointer-events: none;
}

/* Optional variant helper if you ever need a static hint style */
.tile-hint--static{ opacity: .75; }


/* =========================================================
   Tile completion + missing styling
   Works with tiles.js adding `.tile--done` / `.tile--missing`
   Doesn’t rely on border-width being nonzero
   ========================================================= */

/* DONE: subtle green edge + tint + checkmark color */
.tile.tile--done{
  box-shadow:
    0 0 0 1px rgba(25, 135, 84, 0.35) inset,
    0 0 0 1px rgba(25, 135, 84, 0.08);
}

/* Very subtle green wash without changing your base tile-bg too much */
.tile.tile--done::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--tile-radius);
  background: rgba(25, 135, 84, 0.06);
  pointer-events: none;
}

/* Make caret/check look "done" */
.tile.tile--done .tile-caret{
  color: rgba(25, 135, 84, 0.95);
}

/* Optional: make hint a touch brighter when done */
.tile.tile--done .tile-hint{
  opacity: 0.92;
}


/* MISSING: subtle red edge + tint */
.tile.tile--missing{
  box-shadow:
    0 0 0 1px rgba(220, 53, 69, 0.40) inset,
    0 0 0 1px rgba(220, 53, 69, 0.08);
}

.tile.tile--missing::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--tile-radius);
  background: rgba(220, 53, 69, 0.05);
  pointer-events: none;
}

.tile.tile--missing .tile-caret{
  color: rgba(220, 53, 69, 0.95);
}

/* Optional: make hint reflect missing state (pure CSS; JS only sets text) */
.tile.tile--missing .tile-hint{
  opacity: 0.92;
  color: rgba(220, 53, 69, 0.95);
}

/***********************
* TILE END
***********************/

/* Setup tile layout: keep full-width tiles full, but allow 2-up tiles on small phones */
@media (min-width: 360px) and (max-width: 575.98px) {
  .tile-grid-two-up-360 > .col-12.col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
}