/* =============================================================================
   DEX Portal - Websites

   The All Websites screen: five counters, and the estate grouped by the project
   that bills it.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Shared page furniture

   These are general enough to belong to any screen with a toolbar or a table of
   actions, and they live here only because Websites is the first screen to need
   them. Moving them to components.css the moment a second screen does.
   ----------------------------------------------------------------------------- */

/* Pushes whatever follows it to the right-hand end of the toolbar. Doubles as
   the slot the sync status sits in, so the status has somewhere to appear
   without a second element that would collapse to nothing when empty. */
.page-toolbar__spacer {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-tiny);
    color: var(--text-muted);
    text-align: right;
    padding-right: 4px;
}

/* Past an hour the copy stops being reported and starts being questioned. */
.sync-status--stale {
    color: var(--status-warning);
    font-weight: 600;
}

/* A solid black action, matching the Edit Website control in the platform this
   list mirrors. Reserved for the row action that leaves the product. */
.button--dark {
    background: var(--surface-header);
    color: var(--text-on-dark);
    border: 1px solid var(--surface-header);
}

.button--dark:hover:not(:disabled) {
    background: var(--surface-header-hover);
    border-color: var(--surface-header-hover);
}

.data-table__actions {
    text-align: right;
    white-space: nowrap;
}

.data-table__actions-heading {
    text-align: right;
}

/* Present for screen readers, absent for everyone else. Used for the heading of
   an actions column, which needs a name without needing a label. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* -----------------------------------------------------------------------------
   The five counters

   Each one is a button, because each one is also the filter for what it counts.
   A number that cannot be acted on sends somebody hunting through the list by
   hand for the seven expired sites it just told them about.
   ----------------------------------------------------------------------------- */

.summary-counters {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    padding: 0 var(--gutter) 4px;
}

.summary-counter {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    text-align: left;
    background: var(--surface-panel);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-large);
    cursor: pointer;
    transition:
        border-color var(--duration-instant) var(--easing-standard),
        background   var(--duration-instant) var(--easing-standard);
}

.summary-counter:hover {
    border-color: var(--border-strong);
}

/* The selected counter is also the active filter, so it has to look switched
   on rather than merely hovered - otherwise the list looks broken to anyone who
   has forgotten they pressed it. */
.summary-counter--selected {
    border-color: var(--accent);
    background: var(--accent-tint);
}

.summary-counter__badge {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: var(--radius-medium);
    display: grid;
    place-items: center;
}

.summary-counter__badge--success { background: var(--status-success-tint); color: var(--status-success); }
.summary-counter__badge--info    { background: var(--status-info-tint);    color: var(--status-info); }
.summary-counter__badge--danger  { background: var(--status-danger-tint);  color: var(--status-danger); }
.summary-counter__badge--accent  { background: var(--accent-tint);         color: var(--accent); }

.summary-counter__text {
    min-width: 0;
}

.summary-counter__value {
    display: block;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.summary-counter__label {
    display: block;
    font-size: var(--font-size-tiny);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* -----------------------------------------------------------------------------
   The estate, grouped by project
   ----------------------------------------------------------------------------- */

.website-list-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    margin: 12px var(--gutter) var(--gutter);
    background: var(--surface-panel);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-large);
}

/* Fixed layout, so the columns are decided by these widths rather than by
   whichever project happens to hold the longest domain name. Every row in the
   list is in this one table for the same reason. */
.website-table {
    table-layout: fixed;
    min-width: 900px;
}

.website-table__column--address { width: 24%; }
.website-table__column--name    { width: 20%; }
.website-table__column--plan    { width: 12%; }
.website-table__column--type    { width: 11%; }
.website-table__column--status  { width: 12%; }
.website-table__column--manage  { width: 10%; }
.website-table__column--actions { width: 11%; }

.website-table thead th:first-child,
.website-table tbody td:first-child {
    padding-left: var(--gutter);
}

.website-table thead th:last-child,
.website-table tbody td:last-child {
    padding-right: var(--gutter);
}

/* -----------------------------------------------------------------------------
   The project band

   Sticks under the column headings while its own rows are on screen, so it is
   still possible to tell which project a row belongs to forty rows down.
   ----------------------------------------------------------------------------- */

/* Grey rather than tinted: the band is structure, not an alert, and a violet
   stripe repeated twenty-three times down a page reads as twenty-three things
   wanting attention. The divider is --border-strong rather than the hairline
   used between rows, so the line between two projects is plainly heavier than
   the line between two sites in one. */
.project-row td {
    position: sticky;
    top: var(--height-data-table-head);
    z-index: 1;
    padding: 0;
    background: var(--surface-row-band);
    border-bottom: 1px solid var(--border-strong);
    border-top: 1px solid var(--border-strong);
}

.project-row:hover td {
    background: var(--surface-row-band);
}

/* The whole band is the control that opens the project. A button rather than a
   click handler on the row, so it is reachable by keyboard and announces its
   own open state. */
.project-row__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px var(--gutter);
    background: none;
    border: 0;
    border-left: 3px solid var(--accent);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--duration-instant) var(--easing-standard);
}

/* Darkens rather than tints on hover, so the band stays the same colour family
   whether or not the pointer is on it. */
.project-row__toggle:hover {
    background: rgba(15, 17, 21, 0.04);
}

.project-row__chevron {
    display: flex;
    color: var(--accent);
    transition: transform var(--duration-quick) var(--easing-standard);
}

.project-row--expanded .project-row__chevron {
    transform: rotate(90deg);
}

/* The id and its label never shrink - the site names give way instead, because
   a truncated identifier is useless and a truncated name is still recognisable. */
.project-row__label {
    flex: none;
    font-size: var(--font-size-tiny);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.project-row__value {
    flex: none;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* What the project actually is, in the words somebody would recognise. The id
   identifies it; the names are how anyone finds it. */
.project-row__names {
    min-width: 0;
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-row__names::before {
    content: '·';
    margin-right: 8px;
    color: var(--text-muted);
}

/* Pushed to the right end, where it reads as an aside rather than a heading. */
.project-row__meta {
    margin-left: auto;
    padding-left: 12px;
    flex: none;
    font-size: var(--font-size-tiny);
    color: var(--text-muted);
}


/* -----------------------------------------------------------------------------
   Website rows
   ----------------------------------------------------------------------------- */

.website-address {
    display: block;
    font-size: var(--font-size-base);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.website-name {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Type and id share a cell and a baseline: the id is a qualifier on the type,
   not a second fact, and stacking them made every row two lines tall for no
   gain. */
.website-type {
    font-size: var(--font-size-tiny);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}

.website-identifier {
    font-size: var(--font-size-tiny);
    color: var(--text-muted);
    margin-left: 6px;
    font-variant-numeric: tabular-nums;
}

/* The plan a site sits on. Muted rather than a pill: it is a fact about the
   project, the same one the band above already carries, and a coloured chip on
   every row would compete with the status pill for the eye. */
.website-plan {
    display: block;
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* -----------------------------------------------------------------------------
   The Manage control

   A button per row that opens Activate / Expire / Delete. The menu is fixed to
   the viewport and lives on document.body, so it floats clear of the table's
   own overflow clip and of any panel it is drawn inside; the script closes it
   the moment the row scrolls, so it never hangs where the row used to be.
   ----------------------------------------------------------------------------- */

.website-manage__trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.website-manage__trigger .icon {
    margin-right: -2px;
}

.website-manage__menu {
    position: fixed;
    z-index: 1000;
    width: 248px;
    max-width: calc(100vw - 16px);
    padding: 6px;
    background: var(--surface-panel);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-overlay, 0 12px 32px rgba(15, 17, 21, 0.16));
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.website-manage__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    background: none;
    border: 0;
    border-radius: var(--radius-small);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-primary);
    transition: background var(--duration-instant) var(--easing-standard);
}

.website-manage__item:hover {
    background: var(--surface-row-hover, rgba(15, 17, 21, 0.04));
}

.website-manage__item-icon {
    display: flex;
    flex: none;
    color: var(--text-muted);
}

.website-manage__item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.website-manage__item-label {
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1.2;
}

.website-manage__item-detail {
    font-size: var(--font-size-tiny);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Delete is the one action here that cannot be taken back, so it is the one
   action that looks it - red on hover, red icon, kept last and apart. */
.website-manage__item--danger {
    color: var(--status-danger);
}

.website-manage__item--danger .website-manage__item-icon,
.website-manage__item--danger .website-manage__item-detail {
    color: var(--status-danger);
}

.website-manage__item--danger:hover {
    background: var(--status-danger-tint);
}


/* -----------------------------------------------------------------------------
   Responsive

   Five counters across is a phone-sized card each by 900px, so they wrap rather
   than shrink. Below that the table drops the columns whose content is already
   visible in the row: the type and the plan both repeat what the name and the
   status pill have said.
   ----------------------------------------------------------------------------- */

@media (max-width: 1180px) {
    .summary-counters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .summary-counters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* The table keeps all five columns and scrolls sideways instead of hiding
       any of them. Every column here is the answer to a different question -
       which site, whose, what kind, what state - and dropping one turns the
       list into a puzzle rather than a shorter list. */
    .website-list-scroll {
        margin-left: var(--gutter);
        margin-right: var(--gutter);
    }
}

@media (max-width: 560px) {
    .summary-counters {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The sync time goes first: it is context, and context is what a phone has
       least room for. Refresh is still there to act on it. */
    .page-toolbar__spacer {
        display: none;
    }

    .project-row__toggle {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* The plan and the site count are both repeated in the rows underneath.
       The names are not, and they are what somebody is scanning for, so they
       get the width. */
    .project-row__meta {
        display: none;
    }
}