/*
 * Power-socket icons.
 *
 * A socket is drawn in a square box - 240px on the household page, 53px on the dashboard - and
 * either has a picture or does not. A socket a household added itself never does, because no
 * release shipped one for it, so "no picture" is the ordinary case and has to look deliberate
 * rather than broken. That is the tile below: the socket's emoji, centred, on a soft ground.
 *
 * See A_Documents/plans/POWERSOCKET_ICONS.md for the contract the pictures themselves follow.
 */

.socket-image {
    /* The sources are four different pixel sizes and not all of them are square (dryer.gif is
       800x450), so the box is honoured and the subject is fitted into it rather than stretched
       to fill it. This is what stops the dryer being squashed while its pictures are re-cut. */
    object-fit: contain;
    max-width: 100%;
}

.socket-emoji-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
    border-radius: 12%;
    background: rgba(88, 103, 221, 0.08);
    border: 1px solid rgba(88, 103, 221, 0.18);
    /* An emoji has no intrinsic baseline worth trusting across platforms; centring the flex box
       is what keeps it in the middle on macOS, Windows and Android alike. */
    overflow: hidden;
    user-select: none;
}

/* A running socket used to be signalled by the animation. Without a picture the tile carries that
   job, so it breathes rather than sits still - slowly, because it is on a page a household leaves
   open, not a loading spinner. */
.socket-emoji-tile.is-running {
    background: rgba(88, 103, 221, 0.16);
    border-color: rgba(88, 103, 221, 0.35);
    animation: socket-tile-pulse 2.4s ease-in-out infinite;
}

@keyframes socket-tile-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.04);
        opacity: 0.82;
    }
}

/* Motion is decoration here - the state is already in the label and the load figure next to it. */
@media (prefers-reduced-motion: reduce) {
    .socket-emoji-tile.is-running {
        animation: none;
    }
}

/*
 * The household page as a grid of tiles - issue 667.
 *
 * One tile per configured socket, whatever the household has: the grid fills as many columns as
 * fit, so eight sockets and eleven look the same and a phone gets one column. A running socket is
 * the one thing a glance has to find, so it gets the accent border and moves to the front.
 */

.socket-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.socket-summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 180px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #dadfd9;
}

.socket-summary-item.is-dark {
    background: #1a1d1b;
    border-color: #1a1d1b;
    color: #f4f5f2;
}

.socket-summary-label {
    font-size: 13px;
    opacity: 0.75;
}

.socket-summary-value {
    font-size: 24px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.socket-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    align-items: start;
}

.socket-tile {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #dadfd9;
}

.socket-tile.is-running {
    border: 2px solid #0f6b5f;
    padding: 15px;
}

.socket-tile-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.socket-tile-title {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.socket-tile-name {
    font-size: 16px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.socket-tile-state {
    font-size: 12px;
    color: #565e58;
}

.socket-tile.is-running .socket-tile-state {
    color: #0f6b5f;
    font-weight: 600;
}

.socket-switch-form {
    margin: 0;
    flex: none;
}

/* A link drawn as a switch: it posts the socket's key, see SocketTile. 52x30 keeps it a real
   touch target on a phone. */
.socket-switch {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 52px;
    height: 30px;
    padding: 3px;
    border-radius: 999px;
    background: #c8cdc6;
    box-sizing: border-box;
    text-decoration: none !important;
}

.socket-switch.is-on {
    background: #0f6b5f;
    justify-content: flex-end;
}

span.socket-switch {
    opacity: 0.5;
    cursor: not-allowed;
}

.socket-switch:focus-visible {
    outline: 3px solid #0f6b5f;
    outline-offset: 2px;
}

.socket-switch-knob {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
}

/*
 * When the run going on now will be done, or how long the last one took - issue 123. One block
 * between the tile's head and its figures, in four states: an estimate, running without one, done
 * (for two hours, in amber, so a load nobody emptied is the one thing that stands out), and idle.
 */
.socket-tile.is-done {
    border: 2px solid #b45309;
    padding: 15px;
}

.socket-cycle {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border-radius: 10px;
    background: #f3f7f5;
}

.socket-cycle.is-done {
    background: #fdf6ee;
}

.socket-cycle.is-idle {
    background: #f6f7f5;
    gap: 4px;
}

.socket-cycle-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: #565e58;
}

.socket-cycle-label {
    font-size: 12px;
    color: #565e58;
}

.socket-cycle-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    color: #0f6b5f;
}

.socket-cycle.is-done .socket-cycle-value,
.socket-cycle-done {
    color: #9a4507;
}

.socket-cycle-done {
    font-weight: 600;
}

.socket-cycle-when {
    font-size: 15px;
    font-weight: 600;
}

.socket-cycle-text {
    font-size: 12px;
}

.socket-cycle-note,
.socket-cycle-row.socket-cycle-note {
    font-size: 11px;
    color: #565e58;
}

.socket-cycle-bar {
    height: 8px;
    border-radius: 4px;
    background: #dadfd9;
    overflow: hidden;
}

.socket-cycle-bar-fill {
    height: 8px;
    background: #0f6b5f;
}

/* No estimate yet: a bar with nothing to fill, drawn as such rather than as an empty one. */
.socket-cycle-bar.is-unknown {
    background: repeating-linear-gradient(90deg, #dadfd9 0 10px, #e9ece8 10px 20px);
}

.socket-tile-figures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.socket-tile-figures > div {
    display: flex;
    flex-direction: column;
}

.socket-figure {
    font-size: 17px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.socket-figure-label {
    font-size: 12px;
    color: #565e58;
}

.socket-tile-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: #565e58;
}

.socket-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 6px;
    background: #d5ebe6;
    color: #0a4d44;
}

.socket-rule {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    padding-top: 8px;
    border-top: 1px solid #eceee9;
}

.socket-rule form {
    margin: 0;
}

.socket-rule-note {
    display: block;
    font-size: 12px;
    color: #8a4b00;
}

.socket-tile-chart summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #0f6b5f;
    min-height: 32px;
    display: flex;
    align-items: center;
}

/* the switches besides the main one, folded under the figures (issue 709) - the rules inside
   start right under the summary, so the first one needs no rule line of its own */
.socket-tile-switches > .socket-rule:first-of-type {
    border-top: none;
    padding-top: 0;
}

.socket-tile-switches[open] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.socket-badges {
    display: inline-flex;
    gap: 6px;
}

.socket-badge-timer {
    background: #fdebd0;
    color: #8a4b00;
}

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