/* =============================================================================
   Module tiles - AM Navy soft (22 Oct 2026)
   The HR tile look everywhere: a soft navy tint, a light navy edge, rounded
   5px, slow hover; a chosen tile gets a navy ring. Tiles only: tables,
   toolbars and panels are unchanged.

     Finance    .finance-page     Orders     .orders-page
     Bookings   .bookings-page, .bks-page, .wallet-page, loyalty and wallet tiles
     Tasks      .tasks-scope      Tickets    .tickets-page
     Projects   .projects-page     Docs       .docs-page (All Documents, Forms, Templates, Core Templates)
     Websites   .websites-page (summary counters, overview tiles)
     Domains    .domain-tiles, .domain-topups (summary counters, overview
                tiles, domain and email package panel tiles)
     Telephony  .calls-page (Call Logs summary counters)
   ============================================================================= */

:is(.finance-page, .orders-page, .bookings-page, .bks-page, .wallet-page, .tasks-scope, .tickets-page, .projects-page, .docs-page) .invoice-widgets,
.lyl-tiles,
.wallet-tiles,
.overview-tiles,
.agency-sites__tiles { gap: 14px; }

/* ---- The tile ---------------------------------------------------------------- */

:is(.finance-page, .orders-page, .bookings-page, .bks-page, .wallet-page, .tasks-scope, .tickets-page, .projects-page, .docs-page) .invoice-widget,
:is(.websites-page, .domain-tiles, .calls-page) .summary-counter,
.lyl-tile,
.wallet-tile,
.overview-tile,
.agency-sites__tile,
.domain-tile {
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid rgba(25, 33, 59, 0.08);
    border-radius: 5px;
    background: rgba(25, 33, 59, 0.045);
    box-shadow: none;
    transition: border-color 280ms ease, background-color 280ms ease, box-shadow 280ms ease;
}

.lyl-tiles--compact .lyl-tile,
.wallet-tile,
.domain-tile { padding: 13px 15px; }

:is(.finance-page, .orders-page, .bookings-page, .bks-page, .wallet-page, .tasks-scope, .tickets-page, .projects-page, .docs-page) .invoice-widget:not(:disabled):hover,
:is(.websites-page, .domain-tiles, .calls-page) .summary-counter:hover,
.lyl-tile:hover,
.wallet-tile:hover,
.overview-tile:hover,
.agency-sites__tile:hover,
.domain-tile:hover {
    border-color: rgba(25, 33, 59, 0.16);
    background: rgba(25, 33, 59, 0.06);
}

/* The chosen filter tile. */
:is(.finance-page, .orders-page, .bookings-page, .bks-page, .wallet-page, .tasks-scope, .tickets-page, .projects-page, .docs-page) .invoice-widget--active,
:is(.finance-page, .orders-page, .bookings-page, .bks-page, .wallet-page, .tasks-scope, .tickets-page, .projects-page, .docs-page) .invoice-widget--active:not(:disabled):hover,
:is(.websites-page, .domain-tiles, .calls-page) .summary-counter--selected,
:is(.websites-page, .domain-tiles, .calls-page) .summary-counter--selected:hover {
    border-color: var(--accent, #19213b);
    background: rgba(25, 33, 59, 0.07);
    box-shadow: inset 0 0 0 1px var(--accent, #19213b);
}

/* ---- Numbers: navy unless the tile carries a tone ------------------------------- */

:is(.finance-page, .orders-page, .bookings-page, .bks-page, .wallet-page, .tasks-scope, .tickets-page, .projects-page, .docs-page) .invoice-widget__value,
:is(.websites-page, .domain-tiles, .calls-page) .summary-counter__value,
.lyl-tile__value,
.wallet-tile__value,
.overview-tile__value,
.agency-sites__value,
.domain-tile__value { color: var(--accent, #19213b); }

:is(.finance-page, .orders-page, .bookings-page, .bks-page, .wallet-page, .tasks-scope, .tickets-page, .projects-page, .docs-page) .invoice-widget__value { font-size: 24px; }

:is(.finance-page, .orders-page, .bookings-page, .bks-page, .wallet-page, .tasks-scope, .tickets-page, .projects-page, .docs-page) .invoice-widget--success .invoice-widget__value,
.lyl-tile--success .lyl-tile__value,
.wallet-tile--success .wallet-tile__value,
.overview-tile--success .overview-tile__value,
.agency-sites__tile--success .agency-sites__value { color: var(--status-success); }

:is(.finance-page, .orders-page, .bookings-page, .bks-page, .wallet-page, .tasks-scope, .tickets-page, .projects-page, .docs-page) .invoice-widget--danger .invoice-widget__value,
.agency-sites__tile--danger .agency-sites__value { color: var(--status-danger); }

:is(.finance-page, .orders-page, .bookings-page, .bks-page, .wallet-page, .tasks-scope, .tickets-page, .projects-page, .docs-page) .invoice-widget--warning .invoice-widget__value,
.lyl-tile--warning .lyl-tile__value,
.wallet-tile--warning .wallet-tile__value,
.agency-sites__tile--warning .agency-sites__value { color: var(--status-warning); }

:is(.finance-page, .orders-page, .bookings-page, .bks-page, .wallet-page, .tasks-scope, .tickets-page, .projects-page, .docs-page) .invoice-widget--info .invoice-widget__value,
.wallet-tile--info .wallet-tile__value { color: var(--status-info); }

/* Warning tiles keep the soft navy body; the colour stays on the number and
   the note, so a row of tiles reads as one set. */
.overview-tile--warning,
.domain-tile--warn,
.agency-sites__tile--accent,
.agency-sites__tile--danger,
.agency-sites__tile--warning { background: rgba(25, 33, 59, 0.045); border-color: rgba(25, 33, 59, 0.08); }
.overview-tile--warning .overview-tile__value { color: var(--status-warning); }
.agency-sites__tile--accent .agency-sites__value { color: var(--accent, #19213b); }

/* ---- Labels: plain case, quieter ------------------------------------------------- */

:is(.finance-page, .orders-page, .bookings-page, .bks-page, .wallet-page, .tasks-scope, .tickets-page, .projects-page, .docs-page) .invoice-widget__label,
.lyl-tile__label {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-secondary, #43484f);
}

/* ---- Phones: two tiles a row, tighter ------------------------------------------ */

/* Five tiles at desktop padding stacked three rows deep and pushed the list
   itself below the fold of a phone. Two a row with less padding keeps the
   figures and puts the first rows of the table on screen. */
@media (max-width: 560px) {
    :is(.finance-page, .orders-page, .bookings-page, .bks-page, .wallet-page, .tasks-scope, .tickets-page, .projects-page, .docs-page) .invoice-widgets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    :is(.finance-page, .orders-page, .bookings-page, .bks-page, .wallet-page, .tasks-scope, .tickets-page, .projects-page, .docs-page) .invoice-widget,
    :is(.websites-page, .domain-tiles, .calls-page) .summary-counter {
        padding: 10px 12px;
    }

    :is(.finance-page, .orders-page, .bookings-page, .bks-page, .wallet-page, .tasks-scope, .tickets-page, .projects-page, .docs-page) .invoice-widget__value {
        font-size: var(--font-size-large);
    }

    :is(.finance-page, .orders-page, .bookings-page, .bks-page, .wallet-page, .tasks-scope, .tickets-page, .projects-page, .docs-page) .invoice-widget__label {
        font-size: var(--font-size-small);
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.finance-page, .orders-page, .bookings-page, .bks-page, .wallet-page, .tasks-scope, .tickets-page, .projects-page, .docs-page) .invoice-widget,
    :is(.websites-page, .domain-tiles, .calls-page) .summary-counter,
    .lyl-tile, .wallet-tile, .overview-tile, .agency-sites__tile, .domain-tile { transition: none; }
}