/* =============================================================================
   DEX Portal - Records

   One record, inside the shared slide-over. There are no cards here: the panel
   body is a single white sheet and the sections are separated by the same ruled
   line every other panel uses. A card is a box drawn around content to say
   "this belongs together", and inside a panel that is already one subject, it
   says nothing and costs a shadow.

   The strip under the tabs is all one grey weight, label and value alike. It is
   context somebody glances at on the way past. Anything worth acting on is a
   row below, where it can be clicked and changed.
   ============================================================================= */

.client-profile {
    display: flex;
    flex-direction: column;
    min-width: 0;
}


/* -----------------------------------------------------------------------------
   TABS

   They sit at the top of the body and are pulled out to the panel's edges, so
   the underline runs the full width rather than stopping short of it and
   looking like a mistake.
   -------------------------------------------------------------------------- */

.record-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: calc(var(--gutter-tight) * -1) calc(var(--gutter-tight) * -1) 0;
    padding: 0 var(--gutter-tight);
    border-bottom: 1px solid var(--border-default);
    overflow-x: auto;
    scrollbar-width: none;
}

.record-tabs::-webkit-scrollbar {
    display: none;
}

.record-tab {
    flex: none;
    padding: 12px 12px 10px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: var(--font-size-small);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--duration-instant) var(--easing-standard);
}

.record-tab:hover {
    color: var(--text-secondary);
}

.record-tab--active {
    color: var(--text-primary);
    border-bottom-color: var(--text-primary);
}


/* -----------------------------------------------------------------------------
   SUMMARY STRIP
   -------------------------------------------------------------------------- */

.record-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 28px;
    padding: 14px 0;
    border-bottom: var(--divider-width) solid var(--divider-colour);
}

.record-summary__field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Label and value share a colour on purpose. Emphasising the value would make
   the strip compete with the record underneath it, and this is the part nobody
   is meant to stop and read. */
.record-summary__label,
.record-summary__value {
    color: var(--text-muted);
    font-size: var(--font-size-small);
}

.record-summary__label {
    font-size: var(--font-size-tiny);
}

.record-summary__value {
    font-weight: 500;
    overflow-wrap: anywhere;
}


/* -----------------------------------------------------------------------------
   CONTENT AND COLUMNS

   Column one holds short, fixed facts - a name, a postcode, a PIN. Column two
   holds the thread, which is the only thing on the screen that benefits from
   more room, so it is the only thing that gets it.
   -------------------------------------------------------------------------- */

.client-profile__content {
    min-width: 0;
}

/* Column one is a fixed width, not a share of the panel.
   
   A name, a postcode and a phone number are the same size whatever the panel
   is, so widening the panel to read a long thread should not stretch them
   across a foot of screen - it should give the extra room to the side that has
   something to do with it. Four hundred and twenty pixels is what the longest
   thing in the column actually needs - an address line, an email address - with
   room to spare and none to waste.

   It shrinks below that when it has to, and the container query in
   components.css still stacks the two columns when the panel is dragged narrow.
   This has to sit inside its own container query: records.css loads after
   components.css, so an unguarded rule here would win against the stacking one
   and leave a fixed column in a 440px panel. */
@container (min-width: 821px) {
    .slide-over__layout--record {
        grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    }
}


/* -----------------------------------------------------------------------------
   COLUMN FRAME

   Both columns sit on the panel's own white sheet, set apart by a gap rather
   than a ruled line. Column one's white section cards carry a border and a soft
   shadow to lift off the sheet; the activity column is left plain.
   -------------------------------------------------------------------------- */

.slide-over__layout--record {
    gap: 28px;
    padding-top: 20px;
}

.slide-over__layout--record .slide-over__column {
    padding-right: 0;
}

.slide-over__layout--record .slide-over__column:first-child {
    padding: 0;
    align-self: start;
}

.slide-over__layout--record .slide-over__column + .slide-over__column {
    padding-left: 0;
    border-left: none;
}

@container (max-width: 820px) {
    .slide-over__layout--record .slide-over__column + .slide-over__column {
        padding-top: 0;
        border-top: none;
    }
}

/* The summary strip under the tabs is gone - Client number and Client since now
   live in the Contacts card where they can be read in context. */
.record-summary {
    display: none;
}

/* The activity column is not a card: no border, radius or shadow - just the
   heading and the feed on the panel sheet. */
.slide-over__layout--record .slide-over__column + .slide-over__column .record-section {
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: none;
}


/* -----------------------------------------------------------------------------
   SECTIONS

   Each section is a soft card - a thin border, a large radius and the card
   shadow - so the column reads as grouped facts rather than one long ruled
   list. A tinted icon chip heads each one, giving a spine to scan down.
   -------------------------------------------------------------------------- */

.record-section {
    padding: 15px 16px 15px;
    margin-bottom: 16px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-large);
    background: var(--surface-panel);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04),
                0 4px 12px -6px rgba(16, 24, 40, 0.12);
}

.record-section:last-child {
    margin-bottom: 0;
}

/* Plain: the same section without the frame, printed straight onto the panel's
   own sheet. Chosen per section in Fields and Layout, because a card is right
   for a thing in its own right and wrong for the next few fields - a box inside
   a box inside a panel is three frames between somebody and one number. The
   heading and a hairline are enough to say where it starts. */
.record-section--plain {
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.record-section--plain + .record-section--plain {
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
}

/* Outline: the frame without the fill. The panel's own sheet shows through, so
   the section is bounded without being lifted off the page. */
.record-section--outline {
    background: none;
    box-shadow: none;
}

/* How round the frame is is chosen per section in Fields and Layout and given
   in pixels, so it arrives as an inline border-radius on the section itself.
   The value above is only what an unconfigured section falls back to. */

/* A divider: one light line where a section would be. It carries the same
   bottom margin a section does, so the rhythm of the column survives it. */
.record-divider {
    height: 0;
    margin: 0 0 16px;
    border: none;
    border-top: 1px solid var(--border-subtle);
}

.record-section__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-size: var(--font-size-medium);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

/* The glyph sits in a soft tinted chip - it anchors the section header and
   gives the column a spine to scan down, rather than a bare grey mark that
   reads as an afterthought. */
.record-section__glyph {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-small);
    background: var(--accent-tint);
    color: var(--accent);
}


/* -----------------------------------------------------------------------------
   BORDERED BLOCKS

   A business and an address get a border because each is a thing in its own
   right rather than a property of the person - not because the panel needed
   another box.
   -------------------------------------------------------------------------- */

.record-block {
    padding: 12px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-medium);
    background: var(--surface-subtle);
    min-width: 0;
}

.record-block__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.record-block__glyph {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-top: 4px;
    border-radius: var(--radius-small);
    border: 1px solid var(--border-default);
    background: var(--surface-panel);
    color: var(--text-secondary);
}

.record-block__rows {
    flex: 1 1 auto;
    min-width: 0;
}

.record-block .record-row:not(.record-row--field):first-child { padding-top: 0; }
.record-block .record-row:not(.record-row--field):last-child  { padding-bottom: 0; }

/* The block itself is tinted, so a tinted hover would vanish - rows inside it
   lift to white instead. */
.record-block .record-row__value:hover {
    background: var(--surface-panel);
    border-color: var(--border-default);
}

/* Rows that follow the organisation block (Dreamscape ID, PIN, ...) breathe the
   same 10px the rows keep between themselves, rather than touching the card. */
.record-block + .record-rows {
    margin-top: 10px;
}


/* -----------------------------------------------------------------------------
   ADDRESSES

   Read as one address, edited as its parts. It is written the way it would be
   written on an envelope, and opens into six fields only when somebody asks to
   change it - six labelled boxes are the wrong way to read an address and the
   only way to store one.
   -------------------------------------------------------------------------- */

.record-address + .record-address {
    margin-top: 6px;
}

.record-address__summary {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.record-address__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--font-size-base);
    color: var(--text-primary);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.record-address__text--empty {
    color: var(--text-muted);
}

.record-address__toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: var(--radius-small);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--duration-instant) var(--easing-standard),
                color var(--duration-instant) var(--easing-standard);
}

.record-address__toggle:hover {
    background: var(--surface-subtle);
    color: var(--text-primary);
}

.record-address__parts {
    padding: 4px 0 0;
}


/* -----------------------------------------------------------------------------
   ACTIVITY COLUMN
   -------------------------------------------------------------------------- */

.record-activity {
    min-width: 0;
}

.record-activity__composer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-default);
}

.record-activity__avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-pill);
    background: var(--surface-subtle);
    color: var(--text-secondary);
    font-size: var(--font-size-tiny);
    font-weight: 600;
    overflow: hidden;
}
/* A photo covers the disc, so its grey would only ever show as a rim. */
.record-activity__avatar--photo { background: none; }

.record-activity__prompt {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-muted);
    font-size: var(--font-size-base);
}

.record-activity__note {
    flex: none;
    font-size: var(--font-size-tiny);
    color: var(--text-muted);
}


/* -----------------------------------------------------------------------------
   ROWS - A VALUE THAT IS ALSO ITS OWN FIELD

   Nothing here is drawn as an input until it is one. A record covered in boxes
   is a form, and a form is a thing somebody has to remember to save.
   -------------------------------------------------------------------------- */

.record-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Each loose field is its own soft box - the same treatment the addresses get -
   so a section reads as a list of cards rather than a flat run of text. Rows
   inside the organisation block keep their own frame and are left untouched,
   and so does a notched field, which draws its own outline. */
.record-section .record-rows > .record-row:not(.record-row--field) {
    padding: 7px 11px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-medium);
    background: var(--surface-subtle);
}

/* The box is already tinted, so the value lifts to white on hover rather than
   to a grey that would vanish against it. */
.record-section .record-rows > .record-row:not(.record-row--field) .record-row__value:hover {
    background: var(--surface-panel);
    border-color: var(--border-default);
}

/* Inside a padded box the value drops the negative margin it uses on the flat
   layout, and the label picks up the matching indent so label and value stay
   on the same left edge. */
.record-section .record-rows > .record-row:not(.record-row--field) .record-row__label {
    padding-left: 6px;
}

.record-section .record-rows > .record-row:not(.record-row--field) .record-row__value {
    margin-left: 0;
}

/* Label above value, not beside it. Two columns of a narrow panel leaves the
   value nowhere to go, and a label sitting on its own line is how an address
   or a phone number is written down everywhere else. */
.record-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
    min-width: 0;
}

.record-row__label,
.record-row__label--standalone {
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.5;
}

.record-row__label--standalone {
    display: block;
    padding: 7px 0 4px;
}

.record-row__body {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* The button carries no border and no background, so it reads as the value it
   is. The tint on hover is the whole affordance - enough to say "this responds"
   without turning the record into a grid of controls. */
.record-row__value {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 6px;
    margin-left: -6px;
    border: 1px solid transparent;
    border-radius: var(--radius-small);
    background: none;
    color: var(--text-primary);
    font: inherit;
    font-size: var(--font-size-small);
    line-height: 17px;
    font-weight: 500;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: background var(--duration-instant) var(--easing-standard);
}

.record-row__value:hover {
    background: var(--surface-subtle);
    border-color: var(--border-default);
}

.record-row__value:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.record-row__value--fixed {
    cursor: default;
}

.record-row__value--fixed:hover {
    background: none;
    border-color: transparent;
}

.record-row__value--empty {
    color: var(--text-muted);
}

/* The switch is the Settings > Portal one, borrowed whole. Inside a record row
   it drops that screen's own row padding and hover tint: the notched outline is
   already the row, and a second highlight inside it reads as a box in a box. */
.record-row__switch,
.record-row__switch:hover {
    padding: 2px 0;
    gap: 0;
    background: none;
}

/* A live call to Simvoly is in flight. The switch is disabled in script, so
   this only has to say so - dimming the whole row rather than the control,
   because it is the row's answer that is not settled yet. */
.record-row--pending {
    opacity: 0.6;
    cursor: progress;
}

/* An email address and a phone number read as links because that is what they
   are: things you act on, not things you read. Everything else on the record is
   a fact about the person and stays black. */
.record-row[data-field-kind="email"]   .record-row__value,
.record-row[data-field-kind="telephone"] .record-row__value {
    color: var(--status-info);
}

.record-row[data-field-kind="email"]   .record-row__value--empty,
.record-row[data-field-kind="telephone"] .record-row__value--empty {
    color: var(--text-muted);
}

/* The field replaces the value in the same place at the same size, so nothing
   jumps under the cursor at the moment of the click. */
.record-row__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 6px;
    margin-left: -6px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-small);
    background: var(--surface-panel);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--font-size-small);
    line-height: 17px;
}

textarea.record-row__input {
    min-height: 76px;
    resize: vertical;
}

.record-row__input:focus {
    outline: none;
}

.record-row--saving .record-row__value {
    opacity: 0.55;
}


/* -----------------------------------------------------------------------------
   A ROW AS A KUDIO FIELD

   A row on a record is a named thing, so it is drawn as the product's named
   thing: the notched outline, with the field's name written into its top edge.
   The fieldset IS the row - it keeps the row's class and its data- hooks - so
   everything below only has to undo the flat row's own furniture, which the
   outline now supplies.

   Every selector is doubled up on `.record-row`, because kudio-field.css loads
   last and a single class here would lose to `.kudio-field`.
   -------------------------------------------------------------------------- */

/* A span is not a label pointing at a control, so a pointer over it would
   promise a click that does nothing. */
.record-row.record-row--field .kudio-field__label {
    cursor: default;
}

/* The outline is the field's only edge, so the value and the field it opens
   into give up the boxes they drew for themselves and sit where a kudio
   control sits - the negative margin pulls their own padding back so the text
   starts on the outline's inset rather than 6px inside it. */
.record-row.record-row--field .record-row__value,
.record-row.record-row--field .record-row__input {
    margin-left: -6px;
    padding: 0 6px;
    border-color: transparent;
    background: none;
    font-size: var(--font-size-base);
}

/* The same 28px as `.kudio-field__control`, so a row stands exactly as tall as
   a typed field and an unanswered one does not collapse its own outline.
   Centred by flex rather than by a line height, so a value that wraps onto a
   second line still sits in the middle of the space it takes. */
.record-row.record-row--field .record-row__value {
    display: flex;
    align-items: center;
    min-height: 28px;
}

/* The field it opens into matches that height, but a textarea is deliberately
   left alone - a notes field is meant to be several lines tall. */
.record-row.record-row--field input.record-row__input,
.record-row.record-row--field select.record-row__input {
    height: 28px;
}

/* The value's own hover would be shadowed by the two rules above, which are
   heavier than it is, so it is restated at the same weight. The tint is the
   whole affordance: a border here would be a second edge inside the outline. */
.record-row.record-row--field .record-row__value:hover {
    background: var(--surface-subtle);
    border-color: transparent;
}

.record-row.record-row--field .record-row__value--fixed:hover {
    background: none;
}

.record-row__link {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-small);
    color: var(--text-muted);
    transition: background var(--duration-instant) var(--easing-standard),
                color var(--duration-instant) var(--easing-standard);
}

.record-row__link:hover {
    background: var(--surface-subtle);
    color: var(--text-primary);
}

/* A button, not a link - it opens the dialler rather than handing the number to
   whatever the operating system thinks a telephone is. It turns green on hover
   for the same reason the one in the header is green all the time. */
button.record-row__link {
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
}

/* The call and email actions match the buttons in the panel header: a solid
   green call chip, a soft-blue email chip - coloured all the time, not only on
   hover. This covers both the Contacts rows and the Organisation card, which
   carry the same field kinds. The call selector is doubled up because
   `button.record-row__link` above sets background: none at element+class
   weight, and a single class would lose to it. */
button.record-row__link--call,
.record-row__link.record-row__link--call,
.record-row__link.record-row__link--call:hover {
    background: var(--gradient-call-soft);
    color: var(--text-on-dark);
}

.record-row[data-field-kind="email"] .record-row__link,
.record-row[data-field-kind="email"] .record-row__link:hover {
    background: var(--status-info-tint);
    color: var(--status-info);
}

/* Opens the site in the website builder, from the Sub Domain row - the address
   and the way in, in one place.

   The same solid green as the call chip, and doubled up in the selector for the
   same reason: `button.record-row__link` sets `background: none` at
   element+class weight, and a single class would lose to it. Green because this
   is the one action on the record that leaves DEX for somebody else's
   application, which is worth looking different from the quiet grey actions
   that stay here. */
button.record-row__link--builder,
.record-row__link.record-row__link--builder,
.record-row__link.record-row__link--builder:hover {
    background: var(--gradient-call-soft);
    color: var(--text-on-dark);
}

.record-row__link--builder:disabled {
    opacity: .5;
    cursor: progress;
}

/* The tag beside a number or an address - "Personal", "Work", "Main". Grey and
   small on purpose: it qualifies the value, it is not a status. */
.record-row__pill {
    flex: none;
    padding: 1px 7px;
    border-radius: var(--radius-small);
    background: var(--surface-subtle);
    color: var(--text-muted);
    font-size: var(--font-size-tiny);
    white-space: nowrap;
}

/* The exception: "Published" is a STATE, not a qualifier, and it is the one on
   this record that changes what a client can reach. Grey when it is off - the
   default above - and green when a site really is in somebody's hands. */
.record-row__pill--live {
    background: var(--status-success-tint);
    color: var(--status-success);
    font-weight: 600;
}

.record-row__saved {
    flex: none;
    color: var(--status-success);
    font-size: var(--font-size-tiny);
    font-weight: 600;
    white-space: nowrap;
}

.record-rows__empty {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-size-small);
}


/* -----------------------------------------------------------------------------
   CALL LOG

   Every call on a client's numbers. The player unfolds under the row it belongs
   to rather than in a panel of its own: a recording is about that call, and
   moving somebody somewhere else to hear it loses the row they were reading.
   -------------------------------------------------------------------------- */

.call-log {
    overflow-x: auto;
}

.call-log__table {
    width: 100%;
}

.call-log__when {
    color: var(--text-primary);
    font-size: var(--font-size-base);
    white-space: nowrap;
}

.call-log__meta {
    color: var(--text-muted);
    font-size: var(--font-size-tiny);
    text-transform: capitalize;
}

.call-log__number {
    color: var(--status-info);
    font-size: var(--font-size-base);
    white-space: nowrap;
}

/* Said rather than left blank. An empty cell reads as a bug; "Not attributed"
   reads as what it is - a call that arrived before anybody picked it up. */
.call-log__unattributed {
    color: var(--text-muted);
    font-size: var(--font-size-small);
}

.call-log__player-row > td {
    padding-top: 0;
}

.call-log__player {
    padding: 4px 0 10px;
    color: var(--text-muted);
    font-size: var(--font-size-small);
}

.call-log__audio {
    display: block;
    width: 100%;
    max-width: 420px;
    height: 34px;
}

.call-log__audio + .call-log__audio {
    margin-top: 6px;
}


/* -----------------------------------------------------------------------------
   EMPTY TABS
   -------------------------------------------------------------------------- */

.state-message--inline {
    padding: 32px 0;
    min-height: 0;
}


/* -----------------------------------------------------------------------------
   PHONE

   The two columns have already become one by this width - that happens in the
   panel's own layout rules - so what is left here is closing the gaps that only
   made sense when they sat side by side.
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
    .record-summary {
        gap: 10px 20px;
    }

    .record-section:first-child {
        padding-top: 10px;
    }
}