/* ==============================================================
    style.css 2.0
============================================================== */

/* --------------------------------------------------------------
    THEME TOKENS
-------------------------------------------------------------- */

:root {
    /* Backgrounds */
    --color-bg:        #222222;
    --color-bg-elev-1: #2e2e2e;
    --color-bg-elev-2: #383838;
    --color-bg-elev-3: #424242;
    --color-bg-glass:  rgba(13, 13, 13, 0.4);
    --card-bg: rgba(20, 20, 30, 0.8);

    /* Text */
    --color-text:       #f0f0f0;
    --color-text-muted: #a0a0a0;
    --color-text-faint: #5a5a5a;
    --color-text-dark:  #222222;

    /* Accents */
    --blue:   #2271E8;
    --green:  #2DBF6A;
    --yellow: #F0D722;
    --red:    #E8392A;

    /* Accent subtle fills */
    --blue-subtle:   rgba(34,  113, 232, 0.1);
    --green-subtle:  rgba(45,  191, 106, 0.12);
    --yellow-subtle: rgba(240, 215, 34,  0.08);
    --red-subtle:    rgba(232, 57,  42,  0.12);

    /* Accent subtle borders */
    --blue-border:   rgba(34,  113, 232, 0.25);
    --green-border:  rgba(45,  191, 106, 0.25);
    --yellow-border: rgba(240, 215, 34,  0.2);
    --red-border:    rgba(232, 57,  42,  0.25);



    /* Borders */
    --color-border:       rgba(255, 255, 255, 0.12);
    --color-border-light: rgba(255, 255, 255, 0.06);
    --color-border-focus: var(--yellow);
    --color-border-glow: rgba(240, 215, 34, 0.2);

    /* Shadows */
    --shadow-1: 0 2px 4px  rgba(0, 0, 0, 0.25);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.4);

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* Transitions */
    --transition-fast:   120ms ease;
    --transition-medium: 240ms ease;
    --transition-slow:   400ms ease;

    /* Typography */
    --font-body: "Nunito Sans", Arial, sans-serif;
    --font-mono: Consolas, "Courier New", monospace;

    /* Spacing scale */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  32px;
    --space-xxl: 48px;

    /* Misc */
    --color-overlay: rgba(0, 0, 0, 0.5);
}


/* --------------------------------------------------------------
    BASE STYLES
-------------------------------------------------------------- */

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    background-image: url('/static/icons/bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body {
    display: flex;
    flex-direction: column;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--yellow);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

a:hover {
    opacity: 0.7;
}

hr {
    border: none;
    border-top: 1px solid var(--color-border-light);
    margin: var(--space-md) 0;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    line-height: 1.3;
}

p {
    margin-top: 0;
}

code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: var(--color-bg-elev-2);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    color: var(--yellow);
}


/* --------------------------------------------------------------
    BUTTONS
-------------------------------------------------------------- */

.trinkdex-button,
.trinkdex-btn {
    pointer-events: auto;
    padding: 12px 16px;
    border: none;
    border-radius: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    background: var(--color-bg-elev-1);
    color: var(--yellow);

    /* NEU — sorgt für konsistentes Rendering bei <a> und <button> */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
    line-height: 1;
    white-space: nowrap;
}

.trinkdex-button:hover,
.trinkdex-btn:hover {
    opacity: 0.7;
}

.trinkdex-button:active,
.trinkdex-btn:active {
    transform: scale(0.97);
    box-shadow: none;
}

.trinkdex-button:focus-visible,
.trinkdex-btn:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* Button variants */
.trinkdex-btn-primary {
    background: var(--yellow);
    border-color: var(--yellow);
    color: var(--color-text-dark);
    font-weight: 600;
}

.trinkdex-btn-primary:hover {
    background: #d4bc1a;
    border-color: #d4bc1a;
    color: var(--color-text-dark);
}

.trinkdex-btn-danger {
    background: var(--red-subtle);
    border-color: var(--red-border);
    color: var(--red);
}

.trinkdex-btn-danger:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

.trinkdex-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--color-text-muted);
}

.trinkdex-btn-ghost:hover {
    background: var(--color-bg-elev-1);
    border-color: var(--color-border);
    color: var(--color-text);
}

.trinkdex-btn-sm {
    padding: 4px 10px;
    min-height: 28px;
    font-size: 13px;
}

.trinkdex-btn-icon {
    padding: 8px;
    min-width: 36px;
}


/* --------------------------------------------------------------
    CARDS
-------------------------------------------------------------- */

.trinkdex-card {
    background: var(--color-bg-elev-1);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-1);
    padding: var(--space-md);
}

.trinkdex-card-2 {
    box-shadow: var(--shadow-2);
}

.trinkdex-card-3 {
    box-shadow: var(--shadow-3);
}

.trinkdex-card-glas {
    background: var(--color-bg-glass);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    padding: var(--space-sm);
}

.trinkdex-card-inset {
    background: rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    padding: var(--space-md);
}


/* --------------------------------------------------------------
    MODALS
-------------------------------------------------------------- */

.trinkdex-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--color-overlay);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-md);
}

.trinkdex-modal-content {
    background: var(--color-bg-elev-1);
    border: 1px solid var(--color-border);
    margin: auto;
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    max-width: 600px;
    box-shadow: var(--shadow-3);
}

@media (min-width: 993px) {
    .trinkdex-modal-content { width: 900px; }
    .trinkdex-hide-large { display: none !important; }
    .trinkdex-sidebar.trinkdex-collapse { display: block !important; }
}


/* --------------------------------------------------------------
    TABLES
-------------------------------------------------------------- */

.trinkdex-table,
.trinkdex-table-all {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    text-align: left;
    font-size: 14px;
}

.trinkdex-table-all {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.trinkdex-table-all th,
.trinkdex-table-all td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border-light);
}

.trinkdex-table-all th {
    background: var(--color-bg-elev-2);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.trinkdex-table-all tbody tr:last-child td {
    border-bottom: none;
}

.trinkdex-table-all tbody tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

.trinkdex-striped tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02);
}

@media (max-width: 600px) {
    .col-hide-600 { display: none; }
}

@media (max-width: 900px) {
    .col-hide-900 { display: none; }
}

.col-trim {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* --------------------------------------------------------------
    INPUTS & FORMS
-------------------------------------------------------------- */

.trinkdex-input,
.trinkdex-select,
.trinkdex-textarea {
    width: 100%;
    padding: 9px 12px;
    box-sizing: border-box;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-bg-elev-1);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 14px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    appearance: none;
    -webkit-appearance: none;
}

.trinkdex-input:focus,
.trinkdex-select:focus,
.trinkdex-textarea:focus {
    outline: none;
    border-color: var(--yellow);
    box-shadow: 0 0 0 3px var(--yellow-subtle);
}

.trinkdex-input::placeholder,
.trinkdex-textarea::placeholder {
    color: var(--color-text-faint);
}

.trinkdex-textarea {
    resize: vertical;
    min-height: 100px;
}

.trinkdex-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239f9f9f' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

.trinkdex-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: var(--space-xs);
    letter-spacing: 0.04em;
}

.trinkdex-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.trinkdex-check,
.trinkdex-radio {
    width: 18px;
    height: 18px;
    accent-color: var(--yellow);
    cursor: pointer;
}

input[type="checkbox"] {
    accent-color: var(--yellow);
}


/* --------------------------------------------------------------
    TAGS & BADGES
-------------------------------------------------------------- */

.trinkdex-tag,
.trinkdex-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);

    padding: 4px 10px;
    border-radius: var(--radius-pill);
    min-height: 24px;

    background: var(--color-bg-elev-1);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.trinkdex-badge-blue   { background: var(--blue-subtle);   border-color: var(--blue-border);   color: var(--blue); }
.trinkdex-badge-green  { background: var(--green-subtle);  border-color: var(--green-border);  color: var(--green); }
.trinkdex-badge-yellow { background: var(--yellow-subtle); border-color: var(--yellow-border); color: var(--yellow); }
.trinkdex-badge-red    { background: var(--red-subtle);    border-color: var(--red-border);    color: var(--red); }


/* --------------------------------------------------------------
    TOOLTIP
-------------------------------------------------------------- */

.tooltip {
    anchor-scope: --tooltip-anchor;
    anchor-name: --tooltip-anchor;
    display: inline-block;
    position: relative;
}

.tooltip .tooltiptext {
    visibility: hidden;
    position: absolute;
    position-anchor: --tooltip-anchor;
    position-area: bottom right;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
    opacity: 0;
    transition: opacity var(--transition-medium);

    background: var(--color-bg-elev-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 12px;
    color: var(--color-text);
    white-space: nowrap;
    z-index: 100;
    box-shadow: var(--shadow-2);
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


/* --------------------------------------------------------------
    GRID & LAYOUT
-------------------------------------------------------------- */

.trinkdex-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-md);
    width: 100%;
}

.trinkdex-grid-2 { grid-template-columns: repeat(2, 1fr); }
.trinkdex-grid-3 { grid-template-columns: repeat(3, 1fr); }
.trinkdex-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 600px) {
    .trinkdex-grid-2,
    .trinkdex-grid-3,
    .trinkdex-grid-4 {
        grid-template-columns: 1fr;
    }
}

.trinkdex-col-1  { grid-column: span 1; }
.trinkdex-col-2  { grid-column: span 2; }
.trinkdex-col-3  { grid-column: span 3; }
.trinkdex-col-4  { grid-column: span 4; }
.trinkdex-col-6  { grid-column: span 6; }
.trinkdex-col-8  { grid-column: span 8; }
.trinkdex-col-10 { grid-column: span 10; }
.trinkdex-col-12 { grid-column: span 12; }

.trinkdex-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.trinkdex-stack-sm { gap: var(--space-sm); }
.trinkdex-stack-lg { gap: var(--space-lg); }

.trinkdex-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.trinkdex-row-sm { gap: var(--space-sm); }
.trinkdex-row-lg { gap: var(--space-lg); }

.trinkdex-spacer { flex: 1; }


/* --------------------------------------------------------------
    DIVIDER
-------------------------------------------------------------- */

.trinkdex-divider {
    border: none;
    border-top: 0.5px solid var(--color-border-light);
    margin: var(--space-md) 0;
}

.trinkdex-divider-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text-faint);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: var(--space-md) 0;
}

.trinkdex-divider-label::before,
.trinkdex-divider-label::after {
    content: '';
    flex: 1;
    border-top: 0.5px solid var(--color-border-light);
}


/* --------------------------------------------------------------
    SECTION LABEL
-------------------------------------------------------------- */

.trinkdex-section-label {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-faint);
    margin-bottom: var(--space-sm);
}


/* --------------------------------------------------------------
    EMPTY STATE
-------------------------------------------------------------- */

.trinkdex-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-xxl) var(--space-lg);
    color: var(--color-text-faint);
    text-align: center;
    font-size: 14px;
}

.trinkdex-empty i {
    font-size: 32px;
    opacity: 0.3;
}


/* --------------------------------------------------------------
    COLOR UTILITIES
-------------------------------------------------------------- */

.trinkdex-bg-blue   { background: var(--blue)   !important; color: #fff !important; }
.trinkdex-bg-green  { background: var(--green)  !important; color: var(--color-text-dark) !important; }
.trinkdex-bg-red    { background: var(--red)    !important; color: #fff !important; }
.trinkdex-bg-yellow { background: var(--yellow) !important; color: var(--color-text-dark) !important; }

.trinkdex-text-blue   { color: var(--blue); }
.trinkdex-text-green  { color: var(--green); }
.trinkdex-text-red    { color: var(--red); }
.trinkdex-text-yellow { color: var(--yellow); }
.trinkdex-text-muted  { color: var(--color-text-muted); }
.trinkdex-text-faint  { color: var(--color-text-faint); }

.trinkdex-border        { border: 1px solid var(--color-border); }
.trinkdex-border-blue   { border: 1px solid var(--blue-border); }
.trinkdex-border-green  { border: 1px solid var(--green-border); }
.trinkdex-border-yellow { border: 1px solid var(--yellow-border); }
.trinkdex-border-red    { border: 1px solid var(--red-border); }


/* --------------------------------------------------------------
    TYPOGRAPHY UTILITIES
-------------------------------------------------------------- */

.trinkdex-text-xxl  { font-size: 42px !important; }
.trinkdex-text-xl   { font-size: 24px !important; }
.trinkdex-text-lg   { font-size: 18px !important; }
.trinkdex-text-sm   { font-size: 13px !important; }
.trinkdex-text-xs   { font-size: 11px !important; }

.trinkdex-text-center { text-align: center; }
.trinkdex-text-right  { text-align: right; }

.trinkdex-bold   { font-weight: 700; }
.trinkdex-medium { font-weight: 500; }
.trinkdex-italic { font-style: italic; }

.trinkdex-mono { font-family: var(--font-mono); }

.trinkdex-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trinkdex-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85em;
}


/* --------------------------------------------------------------
    SPACING UTILITIES
-------------------------------------------------------------- */

.trinkdex-margin       { margin: var(--space-md); }
.trinkdex-margin-sm    { margin: var(--space-sm); }
.trinkdex-margin-lg    { margin: var(--space-lg); }
.trinkdex-no-margin    { margin: 0; }
.trinkdex-margin-top   { margin-top: var(--space-md); }
.trinkdex-margin-top-sm { margin-top: var(--space-sm); }
.trinkdex-margin-bottom { margin-bottom: var(--space-md); }
.trinkdex-margin-bottom-sm { margin-bottom: var(--space-sm); }
.trinkdex-no-margin-top { margin-top: 0; }

.trinkdex-padding       { padding: var(--space-md); }
.trinkdex-padding-sm    { padding: var(--space-sm); }
.trinkdex-padding-large { padding: var(--space-lg); }
.trinkdex-no-padding    { padding: 0; }


/* --------------------------------------------------------------
    DISPLAY & LAYOUT UTILITIES
-------------------------------------------------------------- */

.trinkdex-flex         { display: flex; }
.trinkdex-flex-column  { display: flex; flex-direction: column; }
.trinkdex-align-center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.trinkdex-align-start  { align-items: flex-start; }
.trinkdex-align-end    { align-items: flex-end; }
.trinkdex-justify-between { justify-content: space-between; }
.trinkdex-justify-center  { justify-content: center; }
.trinkdex-flex-wrap    { flex-wrap: wrap; }
.trinkdex-flex-1       { flex: 1; }

.trinkdex-gap-xs  { gap: var(--space-xs) !important; }
.trinkdex-gap-sm  { gap: var(--space-sm) !important; }
.trinkdex-gap-md  { gap: var(--space-md) !important; }
.trinkdex-gap-lg  { gap: var(--space-lg) !important; }
.trinkdex-gap-xxl { gap: var(--space-xl) !important; }

.trinkdex-fit     { max-width: fit-content; max-height: fit-content; }
.trinkdex-w-full  { width: 100%; }
.trinkdex-h-full  { height: 100%; }

.trinkdex-hidden  { display: none !important; }

.trinkdex-display-topright { position: absolute; right: 0; top: 0; }


/* --------------------------------------------------------------
    SHAPE UTILITIES
-------------------------------------------------------------- */

.trinkdex-round       { border-radius: var(--radius-md); }
.trinkdex-round-sm    { border-radius: var(--radius-sm); }
.trinkdex-round-large { border-radius: var(--radius-lg); }
.trinkdex-circle      { border-radius: 50%; }

.trinkdex-link-reset { text-decoration: none; color: inherit; }

.trinkdex-left   { margin-right: auto; }
.trinkdex-right  { margin-left: auto; }


/* --------------------------------------------------------------
    DIFF VIEW  (proposals + version history)
-------------------------------------------------------------- */

/* tabs */
.diff-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-sm);
}
.diff-tab {
    background: none; border: none;
    border-bottom: 2px solid transparent;
    padding: 5px 12px; margin-bottom: -1px;
    font-size: 12px; font-weight: 600;
    color: var(--color-text-muted); cursor: pointer;
}
.diff-tab.active { color: var(--color-text); border-bottom-color: var(--blue); }

/* field rows */
.diff-field-row {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.diff-field-row:last-child { border-bottom: none; }
.diff-field-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--color-text-muted); margin-bottom: 3px;
}
.diff-values-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.diff-old {
    font-size: 13px; color: var(--red); text-decoration: line-through; opacity: 0.85;
    padding: 2px 6px; background: rgba(255,80,80,0.07); border-radius: var(--radius-sm);
}
.diff-new {
    font-size: 13px; color: var(--green); font-weight: 600;
    padding: 2px 6px; background: rgba(80,200,100,0.07); border-radius: var(--radius-sm);
}
.diff-arrow { font-size: 10px; color: var(--color-text-muted); flex-shrink: 0; }

/* image diff */
.diff-img-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 6px 0;
}
.diff-img-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.diff-img {
    width: 80px; height: 80px; object-fit: cover;
    border-radius: var(--radius-md);
}
.diff-img-old { border: 1.5px solid var(--red); }
.diff-img-new { border: 1.5px solid var(--green); }
.diff-img-placeholder {
    width: 80px; height: 80px; border-radius: var(--radius-md);
    background: var(--color-bg-elev-2); border: 1px dashed var(--color-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-muted); font-size: 22px;
}
.diff-cell-label { font-size: 10px; color: var(--color-text-muted); }

/* --------------------------------------------------------------
    HISTORY SECTION
-------------------------------------------------------------- */

.hist-details {
    padding-top: var(--space-xs, 4px);
}
.hist-details + * { margin-top: 0; }
.hist-in-card {
    margin-top: var(--space-md);
    border-top: 1px solid var(--color-border-light);
    padding-top: var(--space-sm);
}
.hist-details > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-muted);
    padding: var(--space-sm) 0;
    user-select: none;
}
.hist-details > summary::-webkit-details-marker { display: none; }
.hist-details[open] > summary { color: var(--color-text); margin-bottom: var(--space-sm); }
.hist-toggle-icon { font-size: 11px; transition: transform 0.2s; }
.hist-details[open] .hist-toggle-icon { transform: rotate(90deg); }
.hist-count-pill {
    margin-left: auto;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-elev-1);
    border: 1px solid var(--color-border-light);
    color: var(--color-text-muted);
}

.hist-section-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    margin: var(--space-sm) 0 6px;
    padding-left: 2px;
}
.hist-entry {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.hist-entry:last-child { border-bottom: none; }
.hist-entry-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
}
.hist-version-badge {
    font-size: 10px; font-weight: 700;
    padding: 1px 6px; border-radius: 4px;
    background: var(--color-bg-elev-2);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-family: monospace;
}
.hist-current-badge {
    font-size: 10px; padding: 1px 6px;
    border-radius: var(--radius-pill);
    background: var(--green-subtle);
    border: 1px solid var(--green-border);
    color: var(--green);
}
.hist-user   { font-weight: 600; color: var(--color-text); }
.hist-date   { color: var(--color-text-muted); }
.hist-source { font-size: 11px; color: var(--color-text-muted); font-style: italic; }

.hist-entry-current { border-left: 2px solid var(--green); padding-left: 8px; }
.hist-initial-note  { font-size: 11px; color: var(--color-text-muted); padding-left: 10px; margin-top: 2px; font-style: italic; }

.hist-status-badge {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    padding: 1px 7px; border-radius: var(--radius-pill);
}
.hist-status-pending  { background: var(--yellow-subtle); border: 1px solid var(--yellow-border); color: var(--yellow); }
.hist-status-accepted { background: var(--green-subtle);  border: 1px solid var(--green-border);  color: var(--green); }
.hist-status-rejected { background: var(--red-subtle);    border: 1px solid var(--red-border);    color: var(--red); }
.hist-status-expired  { background: var(--color-bg-elev-1); border: 1px solid var(--color-border); color: var(--color-text-muted); }

.hist-section-label-gap { margin-top: var(--space-md); }

.hist-votes { display: flex; gap: 8px; font-size: 11px; padding-left: 10px; margin-top: 4px; }
.hist-vote-approve { color: var(--green); }
.hist-vote-reject  { color: var(--red); }
.hist-vote-sep     { color: var(--color-text-muted); }

.hist-pending-section { margin-top: 0; }
.hist-pending-card {
    padding: 10px 12px;
    margin-bottom: 8px;
    background: rgba(240,215,34,0.04);
    border: 1px solid rgba(240,215,34,0.15);
    border-radius: var(--radius-md);
}