/* ─── Typography ─────────────────────────────────────────────────────────── */

/* One size for the whole furniture - menu, trail, context panel, the diagram's
   boxes, the activity's facts. Nothing shouts except the activity's name. */
:root {
    --ui-size: 0.95rem;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", Arial, sans-serif !important;
}

body, button, input, select, textarea {
    font-family: inherit !important;
}

/* ─── Force light mode ───────────────────────────────────────────────────── */

html, body {
    background-color: white !important;
    color: #4a4a4a !important;
}

.navbar, .box, .table, .card, .panel, .message {
    background-color: white !important;
    color: #4a4a4a !important;
}

.title, .subtitle, .label, .menu-label {
    color: #363636 !important;
}

input, textarea, select, .input, .textarea, .select select {
    background-color: white !important;
    color: #363636 !important;
    border-color: #dbdbdb !important;
}

.input::placeholder, input::placeholder, textarea::placeholder {
    color: #b5b5b5 !important;
    opacity: 1 !important;
}

.control.has-icons-left .icon, .control.has-icons-right .icon {
    color: #7a7a7a !important;
}

.table tbody tr {
    background-color: white !important;
    color: #363636 !important;
}

.table.is-striped tbody tr:nth-child(even) {
    background-color: #f5f5f5 !important;
}

.table td, .table th {
    color: #363636 !important;
    font-size: 0.95rem;
}

strong, b, .has-text-weight-bold {
    color: #363636 !important;
}

/* ─── Layout ─────────────────────────────────────────────────────────────── */

html, body {
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Two menu columns, then the page. The bar naming the current object spans the
   activity column and the content, so what it names sits right above the menu
   that column holds. Both menus are wrapped in one <nav> that dissolves into
   the grid here and closes back into a single panel on a narrow screen. */
.app-container {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
        "menu topbar  topbar"
        "menu content content";
    height: 100vh;
    overflow: hidden;
    background-color: white !important;
}

.left-menu, .right-column {
    display: contents;
}

/* Same height as a menu entry, and no inset: the tile carries on from the
   menu column beside it. */
.top-bar {
    grid-area: topbar;
    display: flex;
    align-items: stretch;
    min-width: 0;
    min-height: 2.4rem;
    border-bottom: 1px solid #ededed;
    background-color: white;
}

/* The trail: full-height tiles butted together, cut out of the same surface as
   the menu. The database and the activity are the context you are working in,
   so they wear the active menu colour; the view they lead to stays quiet - the
   panel on the left already highlights it. */
.trail {
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.trail-block {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 32rem;
    overflow: hidden;
    padding: 0 1rem;
    border-right: 1px solid white;
    background-color: #f5f5f5;
    color: #4a4a4a;
    font-size: var(--ui-size);
    font-weight: 500;
}

.trail-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trail-block:last-child {
    border-right: none;
}

a.trail-block:hover {
    background-color: #ebebeb;
    color: #363636;
}

/* Same highlight as an active menu entry. */
.trail-block.is-context {
    background-color: #00d1b2;
    color: #363636;
}

a.trail-block.is-context:hover {
    background-color: #00c4a7;
}

/* ─── Page heading ───────────────────────────────────────────────────────── */

/* Every page says what it is, in the words of the link that led to it. Drawn
   once, in the chrome, so no page can forget it and none can word it its own
   way. */
.page-title {
    padding: 1rem 0 0;
    font-size: 2rem;
    font-weight: 600;
    color: #363636;
}

/* The way out of a page that sits inside another: the same size as the title
   it leads out of, so it reads as part of it rather than as a footnote. */
.way-out {
    margin-right: 0.6rem;
    color: #b5b5b5;
}

.way-out:hover {
    color: #00947e;
}

/* The one line under it, when the name is not enough on its own. */
.page-hint {
    margin-bottom: 1.25rem;
    font-size: var(--ui-size);
    color: #7a7a7a;
}

/* ─── The activity's own bar ─────────────────────────────────────────────── */

/* Two rows an activity carries everywhere: what it is and how to leave, then
   what can be computed from it. */
.activity-bar {
    grid-area: topbar;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-bottom: 1px solid #ededed;
    background-color: white;
}

.activity-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.4rem 1rem 0.35rem;
    min-width: 0;
}

/* The path you took to get here, one line per activity, climbing to the one
   you are on. Smaller than the title: they are behind you. */
.activity-step {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    max-width: 100%;
    font-size: 0.8rem;
    color: #7a7a7a;
}

.activity-step:hover {
    color: #363636;
}

.activity-step-mark {
    flex-shrink: 0;
    width: 0.9rem;
    color: #b5b5b5;
}

.activity-step-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 2rem;
    font-weight: 600;
    color: #363636;
}

/* It is a title first; that it can be clicked to forget the path shows on
   hover, not as a permanent colour. */
a.activity-name {
    color: #363636;
}

a.activity-name:hover {
    color: #00947e;
}

/* ─── The chain of analyses ──────────────────────────────────────────────── */

/* The activity's analyses hang under its database, on a panel of their own:
   white against the menu's grey, inset from the left and open on the right, so
   it reads as belonging to the page rather than to the fixed menu above it. */
.analysis-panel {
    margin: 0.6rem 0 0.8rem 1.5rem;
    padding: 0.35rem 0;
    border-radius: 12px 0 0 12px;
    background-color: white;
}

.analysis-panel .branch-item {
    padding-left: 1.25rem;
}

.analysis-panel .branch-item:hover {
    background-color: #f3f3f3;
}

/* ─── The five faces of an activity ──────────────────────────────────────── */

.faces {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #ededed;
}

.face {
    padding: 0.35rem 0.9rem;
    border-bottom: 2px solid transparent;
    font-size: var(--ui-size);
    color: #7a7a7a;
    white-space: nowrap;
}

.face:hover {
    color: #363636;
}

.face.is-current {
    border-bottom-color: #00d1b2;
    color: #363636;
    font-weight: 500;
}

/* ─── Analyses outside the chain ─────────────────────────────────────────── */

/* Offered on the activity's own page, not kept on screen: none of them is part
   of the everyday loop. One per line, the name on the left and what it answers
   on the right, so the list can be read down rather than deciphered. */
.side-analyses {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 0.45rem 1.25rem;
    margin-top: 2.5rem;
    max-width: 62rem;
}

.side-analyses-label {
    grid-column: 1 / -1;
    margin-bottom: 0.1rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #999;
}

.side-analysis {
    justify-self: stretch;
    padding: 0.3rem 0.9rem;
    border: 1px solid #dbdbdb;
    border-radius: 999px;
    font-size: var(--ui-size);
    color: #4a4a4a;
    text-align: center;
    white-space: nowrap;
}

.side-analysis:hover {
    border-color: #00d1b2;
    background-color: #f5fdfb;
    color: #363636;
}

/* On a page whose content sets its own margins, the tools still line up with
   the title above them. */
.page-tools {
    margin: 2rem 0;
}

.side-analysis-hint {
    font-size: var(--ui-size);
    color: #7a7a7a;
}

/* ─── Menu branches ──────────────────────────────────────────────────────── */

/* What an entry opens on: the object you picked, then what it offers. Each
   level is written one step further right, so the column reads as the path
   down to where you are. */
.branch {
    padding-bottom: 0.35rem;
}

.branch-group {
    padding-bottom: 0.3rem;
}

.branch-label {
    display: block;
    padding: 0.5rem 1rem 0.15rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #999;
}

.branch-item {
    display: block;
    padding: 0.3rem 0.75rem 0.3rem 1.9rem;
    font-size: var(--ui-size);
    color: #4a4a4a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.branch-item:hover {
    background-color: #eaeaea;
    color: #363636;
}

/* Same highlight as an active menu entry. */
.branch-item.is-active {
    background-color: #00d1b2;
    color: #363636;
    font-weight: 500;
}

.branch-item.is-active:hover {
    background-color: #00c4a7;
    color: #363636;
}

/* The enrichment chain: a vertical rail along the seam with the page. */
.branch-item.chain {
    border-right: 3px solid #d8f3ee;
}

.branch-item.chain.is-active {
    border-right-color: #00947e;
}

.branch-sep {
    border-top: 1px solid #e2e2e2;
    margin: 0.35rem 1rem 0.35rem 1.9rem;
}

/* The head of a branch: the object you are in. It reads as a quiet menu entry -
   being inside a database is not being on a page of it - and opens on the
   others without leaving the one you are on. */
.menu-select {
    position: relative;
}

.menu-select select {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    border: none !important;
    border-radius: 0;
    padding: 0.45rem 1.7rem 0.45rem 1.9rem;
    background-color: transparent !important;
    color: #363636 !important;
    font-size: var(--ui-size);
    font-weight: 500;
    cursor: pointer;
    text-overflow: ellipsis;
}

.menu-select select:hover {
    background-color: #eaeaea !important;
}

.menu-select::after {
    content: "▾";
    position: absolute;
    top: 50%;
    right: 0.7rem;
    transform: translateY(-50%);
    color: #7a7a7a;
    font-size: 0.8rem;
    pointer-events: none;
}

/* ─── Unit-process diagram (Documentation tab) ───────────────────────────── */

/* The activity drawn as a box: documentation in the frame, everything that
   enters on the left, everything that leaves on the right - the exchanges
   with nature kept apart from the products on each side. */
.unit-process {
    display: grid;
    grid-template-areas:
        "consumed  frame produced"
        "nature-in frame nature-out";
    grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr) minmax(9rem, 13rem);
    gap: 1.5rem 1.75rem;
    align-items: center;
}

.up-nature-in { grid-area: nature-in; }
.up-consumed { grid-area: consumed; }
.up-frame { grid-area: frame; align-self: stretch; }
.up-produced { grid-area: produced; }
.up-nature-out { grid-area: nature-out; }

/* Boxes are told apart by their fill alone: the activity and the products it
   exchanges on the menu's grey, its exchanges with nature on green. The same
   grey frames what a database records about itself, so both objects present
   their facts in the same way. */
.fact-frame {
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    background-color: #f5f5f5;
    line-height: 1.6;
}

/* How much of a method collection one database puts to work: the pair named,
   then the figure read as a sentence rather than a ratio to decode. */
.coverage-summary {
    margin: 0.75rem 0 1.5rem;
}

.coverage-heading {
    font-weight: 600;
}

/* The database-side figure while it is still being counted, or when the
   engine could not say - visibly not a result. */
.coverage-pending {
    color: #7a7a7a;
    font-style: italic;
}

/* What the database records about the activity: one labelled row per fact, all
   in the same register - no fact outranks the others. */
.meta {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: baseline;
    gap: 0.55rem 1.25rem;
    margin: 0;
    font-size: var(--ui-size);
}

/* The one exception to the single size. */
.meta-name {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
}

.meta-label {
    color: #7a7a7a;
}

.meta-value {
    min-width: 0;
    margin: 0;
    color: #363636;
    max-height: 14rem;
    overflow-y: auto;
}

.meta-value p {
    margin: 0 0 0.5rem;
}

.meta-value p:last-child {
    margin-bottom: 0;
}

/* Several short facts on one row, told apart by a middot. */
.meta-sep {
    margin: 0 0.45rem;
    color: #b5b5b5;
}

/* What the row above would be misread without: a caveat, a cost, an
   instruction. Same size as everything else - only the colour steps back. */
p.meta-note {
    margin: 0.15rem 0 0;
    color: #7a7a7a;
}

/* ─── Hub pages ──────────────────────────────────────────────────────────── */

/* A hub is a handful of objects to choose between, not a table to sort: each
   one is a card carrying its name, its size and where it came from, and the
   card itself is the way in. The way to add one is the last card. */
.cards {
    display: grid;
    /* auto-fit, not auto-fill: with fewer cards than the row could hold, the
       empty tracks collapse and the cards share the width instead of leaving a
       gap on the right. */
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 2rem;
}

.object-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 1rem;
    border: 1px solid #ededed;
    border-radius: 10px;
    background-color: white;
    color: #4a4a4a;
}

.object-card.is-openable {
    cursor: pointer;
}

.object-card.is-openable:hover {
    border-color: #00d1b2;
}

.object-card-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}

.object-card-dot {
    flex-shrink: 0;
    font-size: 0.7rem;
    line-height: 1;
}

.object-card-name {
    min-width: 0;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    color: #363636;
}

.object-card-description,
.object-card-facts {
    margin: 0;
    font-size: var(--ui-size);
    color: #7a7a7a;
}

/* One fact per line: three short things read faster stacked than strung
   together with separators. */
.object-card-facts p {
    margin: 0;
}

/* Pushed to the foot so cards of different heights still line their buttons
   up, and separated from the facts above them. */
.object-card-actions {
    margin-top: auto;
    padding-top: 0.5rem;
}

.object-card-actions .button {
    margin-bottom: 0;
}

/* The last card: the same frame, drawn as an outline, since nothing is there
   yet. */
.object-card.is-add {
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-direction: row;
    min-height: 6rem;
    border-style: dashed;
    border-color: #dbdbdb;
    color: #7a7a7a;
}

.object-card.is-add:hover {
    border-color: #00d1b2;
    color: #00947e;
}

/* What the engine says while something opens. */
.load-progress {
    font-family: "Consolas", "Monaco", monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #7a7a7a;
}

/* A database's own page: what it is, then what stands in its way, then the
   tables for whatever is wrong, then its tools. */
.db-overview {
    max-width: 62rem;
}

/* How much of the supply chain resolved. Kept narrow: a bar as wide as the
   frame reads as decoration, one you can take in at a glance reads as a
   measure. */
.meta-value .progress {
    max-width: 26rem;
    height: 0.6rem;
    margin: 0.35rem 0 0;
}

.db-build {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    margin: 1.5rem 0;
}

/* The databases this one can draw on: chips, so a handful of them read as one
   line rather than a stack of full-width bars. Ticked ones are filled, the rest
   outlined - the fill says what is in use, the click changes it. */
.dependencies {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dependency {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    cursor: pointer;
}

.dependency-note {
    color: #7a7a7a;
}

.up-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.6rem 1rem;
    border-radius: 6px;
    background-color: #f5f5f5;
    text-align: center;
    color: #363636;
}

.up-zone:hover {
    background-color: #ebebeb;
    color: #00947e;
}

.up-intro {
    margin-bottom: 1rem;
    font-size: var(--ui-size);
}

.up-zone-title {
    font-size: var(--ui-size);
    font-weight: 600;
}

.up-zone-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--ui-size);
    color: #7a7a7a;
}

/* Nature zones are tinted green; product zones stay neutral. */
.up-nature-in,
.up-nature-out {
    background-color: #eaf7ef;
}

.up-nature-in:hover,
.up-nature-out:hover {
    background-color: #ddf1e5;
}

/* Flow arrows, drawn in the grid gaps on the frame-facing edge of each zone:
   everything flows left to right, into the activity and out of it. */
.up-consumed::after,
.up-nature-in::after,
.up-produced::before,
.up-nature-out::before {
    content: "→";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #00947e;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    /* The arrow glyph is thin at any size; stroking it draws a heavier line. */
    -webkit-text-stroke: 1px #00947e;
}

.up-consumed::after,
.up-nature-in::after {
    right: -1.4rem;
}

.up-produced::before,
.up-nature-out::before {
    left: -1.4rem;
}

@media (max-width: 768px) {
    .unit-process {
        grid-template-areas: "consumed" "nature-in" "frame" "produced" "nature-out";
        grid-template-columns: 1fr;
    }

    /* Stacked layout: the horizontal arrows no longer make sense. */
    .up-consumed::after,
    .up-nature-in::after,
    .up-produced::before,
    .up-nature-out::before {
        content: none;
    }
}

/* One gutter between the menu and everything a page draws - title, tabs and
   content alike, so no page has to remember it and none can pick its own. */
.main-content {
    grid-area: content;
    min-height: 0;
    overflow-y: auto;
    padding: 0 1rem 0;
    background-color: white !important;
}

/* ─── Navbar ─────────────────────────────────────────────────────────────── */

.navbar-menu {
    display: flex !important;
}

.navbar-end {
    margin-left: auto;
}

/* ─── Left menu ──────────────────────────────────────────────────────────── */

/* Narrow on purpose: two of these can stand side by side and still leave the
   page most of its width. */
.menu-column {
    grid-area: menu;
    display: flex;
    flex-direction: column;
    width: 190px;
    overflow: hidden;
    background-color: #f5f5f5 !important;
}

.menu-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 0.5rem;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    cursor: pointer;
    border: none;
    width: 100%;
    background: transparent;
    color: #4a4a4a;
    transition: background-color 0.15s ease;
}

.menu-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.menu-item.is-active {
    background-color: #00d1b2;
    color: #363636 !important;
}

.menu-item.is-active:hover {
    background-color: #00c4a7;
}

.menu-item.is-active .menu-label {
    color: #363636 !important;
}

.menu-item .icon {
    margin-right: 0.75rem;
    width: 1.25rem;
}

.menu-label {
    font-weight: 500;
    font-size: var(--ui-size);
}

/* ─── Exchange metadata disclosure (pedigree + comment) ─────────────────── */

.exchange-meta {
    display: inline-block;
    margin-left: 0.4rem;
    vertical-align: middle;
}

.exchange-meta__summary::-webkit-details-marker,
.exchange-meta__summary::marker {
    display: none;
    content: "";
}

.exchange-meta__summary {
    list-style: none;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    cursor: pointer;
    user-select: none;
    color: #7a7a7a;
    border: 1px solid #dbdbdb;
    border-radius: 50%;
    font-size: 0.65rem;
}

.exchange-meta__summary::before {
    content: "i";
    font-family: serif;
    font-style: italic;
    font-weight: 700;
}

.exchange-meta[open] .exchange-meta__summary {
    color: #00d1b2;
    border-color: #00d1b2;
}

.exchange-meta__body {
    display: block;
    margin-top: 0.4rem;
    padding: 0.5rem 0.6rem;
    background: #fafafa;
    border-left: 2px solid #dbdbdb;
    border-radius: 2px;
    font-size: 0.85rem;
}

.exchange-meta__comment {
    margin: 0.35rem 0 0 0;
    color: #4a4a4a;
}

.pedigree-grid {
    display: inline-flex;
    gap: 0.25rem;
}

.pedigree-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 1.8rem;
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    line-height: 1;
}

.pedigree-cell__label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    opacity: 0.7;
}

.pedigree-cell__score {
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.1rem;
}

.pedigree-cell--1 {
    background: #dcfce7;
    color: #15803d;
}

.pedigree-cell--2 {
    background: #ecfccb;
    color: #4d7c0f;
}

.pedigree-cell--3 {
    background: #fef9c3;
    color: #a16207;
}

.pedigree-cell--4 {
    background: #ffedd5;
    color: #c2410c;
}

.pedigree-cell--5 {
    background: #fee2e2;
    color: #b91c1c;
}

/* ─── Tabs ───────────────────────────────────────────────────────────────── */

.tabs.is-boxed li.is-active a {
    background-color: #00d1b2 !important;
    border-color: #00d1b2 !important;
    color: #363636 !important;
}

.tabs.is-boxed li:not(.is-active) a {
    background-color: white;
    border-color: #b5b5b5;
    color: #4a4a4a;
}

.tabs.is-boxed li:not(.is-active) a:hover {
    background-color: #f5f5f5 !important;
    border-color: #7a7a7a !important;
    color: #363636 !important;
}

/* ─── Mobile ─────────────────────────────────────────────────────────────── */

/* One panel again: the <nav> closes back around both columns, and the whole
   path - the three entries, the database you opened, the activity - is what
   the hamburger reveals. */
@media (max-width: 768px) {
    .app-container {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "topbar"
            "content";
    }

    .left-menu {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: -250px;
        width: 250px;
        height: 100vh;
        z-index: 40;
        overflow-y: auto;
        background-color: #f5f5f5;
        transition: left 0.2s;
    }

    .left-menu.is-active {
        left: 0;
    }

    /* The columns stop being columns; only the footer keeps its place, last. */
    .menu-column {
        display: contents;
    }

    .menu-scroll {
        flex: 0 0 auto;
        overflow: visible;
        padding-top: 3rem;
    }

    .menu-footer {
        order: 1;
    }

    /* Clear the fixed hamburger button, which sits over the top bar and,
       once the menu is open, over its first entry. */
    .top-bar {
        padding-left: 3.25rem;
    }
}

/* Row overflow menu: a Bulma dropdown toggled by Elm state (.is-active). */
.row-action-menu .dropdown-menu {
    z-index: 50; /* above the fixed left menu (z-index 40) */
}
/* Force the light palette: Bulma 1.0 otherwise flips the dropdown to dark when
   the OS is in dark mode, which clashes with the rest of the (light) UI. */
.row-action-menu .dropdown-content {
    background-color: #ffffff;
}
/* Render <button> items as full-width, left-aligned dropdown rows. */
.row-action-menu button.dropdown-item {
    width: 100%;
    border: none;
    background-color: transparent;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: #363636;
}
.row-action-menu button.dropdown-item:hover {
    background-color: #f5f5f5;
    color: #0a0a0a;
}