/* ==========================================================================
   Plannings centre funéraire — chips et rows
   Préfixe ak-cfl-cf__* pour cohabiter avec le design system CFL existant.
   ========================================================================== */

.ak-cfl-cf__wrapper {
    padding: 0;
}

/* Neutralizes the page-level horizontal padding so the toolbar / header bar
   reach the edges, mirroring ak-planning-pf__wrapper-offset on Planning PF. */
.ak-cfl-cf__wrapper-offset {
    margin: 0 -1rem;
}

.ak-cfl-cf__loading {
    padding: var(--cfl-space-md);
    color: var(--cfl-text-secondary, #6b7280);
}

.ak-cfl-cf__panel {
    padding: var(--cfl-space-md);
    background: var(--cfl-gray-50, #f8fafc);
    border-bottom: 1px solid var(--cfl-border, #e2e8f0);
    display: flex;
    flex-direction: column;
    gap: var(--cfl-space-sm);
}

.ak-cfl-cf__panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ak-cfl-cf__panel-title {
    margin: 0;
    font-size: 1.1rem;
    color: var(--cfl-text-primary, #0f172a);
}

/* ─── Row : label gauche (empilé) | clusters matin/aprem | bouton + ───── */

.ak-cfl-cf__row {
    display: flex;
    align-items: stretch;
    gap: var(--cfl-space-md);
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid var(--cfl-border, #e2e8f0);
    border-radius: 6px;
    flex-wrap: nowrap;
}

.ak-cfl-cf__row-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    width: 200px;
    flex-shrink: 0;
    color: var(--cfl-text-primary);
}

.ak-cfl-cf__row-name {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.25;
    color: var(--cfl-text-primary, #0f172a);
}

.ak-cfl-cf__row-kind {
    color: var(--cfl-text-secondary, #6b7280);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.25;
}

.ak-cfl-cf__row-counter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--cfl-text-secondary, #6b7280);
    margin-top: 2px;
}

.ak-cfl-cf__counter-libre {
    color: var(--hk-success-700, #15803d);
}

.ak-cfl-cf__counter-occupe {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--hk-danger-700, #b91c1c);
}

.ak-cfl-cf__counter-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hk-danger-500, #ef4444);
    display: inline-block;
}

.ak-cfl-cf__counter-sep {
    color: var(--cfl-text-tertiary, #94a3b8);
}

/* ─── Clusters Matin / Après-midi ──────────────────────────────────────── */

.ak-cfl-cf__clusters {
    display: flex;
    flex: 1;
    align-items: stretch;
    gap: 0;
    min-width: 0;
}

.ak-cfl-cf__cluster {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 12px;
    min-width: 0;
}

.ak-cfl-cf__cluster--matin {
    padding-left: 0;
}

.ak-cfl-cf__cluster--aprem {
    border-left: 1px dashed var(--cfl-border, #e2e8f0);
    padding-right: 0;
}

.ak-cfl-cf__cluster:only-child {
    border-left: none;
    padding-left: 0;
    padding-right: 0;
}

.ak-cfl-cf__cluster-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cfl-text-tertiary, #94a3b8);
}

.ak-cfl-cf__chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* ─── Chips ponctuels (pill subtle) ─────────────────────────────────────── */

/* Badges informatifs en lecture seule (rendus en <span>) : aucune affordance cliquable
   (pas de cursor pointer, pas de hover, pas d'état actif) — seules les couleurs de statut
   libre / occupé sont conservées comme information. */
.ak-cfl-cf__chip {
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 0.8125rem;
    font-weight: 500;
    background: #ffffff;
}

.ak-cfl-cf__chip--libre {
    background: var(--hk-success-50, #f0fdf4);
    border-color: var(--hk-success-300, #86efac);
    color: var(--hk-success-700, #15803d);
}

.ak-cfl-cf__chip--occupe {
    background: var(--hk-danger-50, #fef2f2);
    border-color: var(--hk-danger-300, #fca5a5);
    color: var(--hk-danger-700, #b91c1c);
}

/* ─── Action column (+ button) ─────────────────────────────────────────── */

.ak-cfl-cf__row-action {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding-left: 12px;
    border-left: 1px solid var(--cfl-border, #e2e8f0);
}

/* ─── Sans-salle row ───────────────────────────────────────────────────── */

/* Harmonisée avec les autres rows : pas de fond ambre — juste une bordure
   discontinue qui signale le statut "à confirmer" sans casser le rythme. */
.ak-cfl-cf__row--sans-salle {
    border-style: dashed;
    border-color: var(--cfl-border-strong, #cbd5e1);
}

.ak-cfl-cf__sans-salle-empty {
    color: var(--cfl-text-secondary, #6b7280);
    font-size: 0.85em;
    font-style: italic;
    align-self: center;
    padding: 4px 0;
}

/* ─── Blocs (rectangles, plage horaire) ─────────────────────────────────── */

/* Blocs informatifs en lecture seule (rendus en <span>) — voir note sur .ak-cfl-cf__chip. */
.ak-cfl-cf__bloc {
    display: block;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: left;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ak-cfl-cf__bloc--libre {
    background: var(--hk-success-50, #f0fdf4);
    border-color: var(--hk-success-300, #86efac);
    color: var(--hk-success-700, #15803d);
}

.ak-cfl-cf__bloc--occupe {
    background: var(--hk-danger-50, #fef2f2);
    border-color: var(--hk-danger-300, #fca5a5);
    color: var(--hk-danger-700, #b91c1c);
}

.ak-cfl-cf__bloc--sans-salle {
    background: var(--hk-warning-50, #fffbeb);
    border-color: var(--hk-warning-300, #fcd34d);
    color: var(--hk-warning-700, #b45309);
}

.ak-cfl-cf__columns {
    flex: 1;
    overflow: hidden;
}

.ak-cfl-cf__column {
    flex: 1 1 400px;
    min-width: 280px;
}

.ak-cfl-cf__card {
    cursor: default;
}

.ak-cfl-cf__op-btn {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 4px 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.ak-cfl-cf__op-btn:disabled {
    cursor: default;
}

.ak-cfl-cf__op-btn:hover:not(:disabled) {
    background: var(--cfl-gray-50, #f8fafc);
}

.ak-cfl-cf__op-lieu,
.ak-cfl-cf__op-detail {
    color: var(--cfl-text-secondary, #6b7280);
    font-size: 0.85em;
}

.ak-cfl-cf__adhoc-content {
    display: flex;
    flex-direction: column;
    gap: var(--cfl-space-sm);
    min-width: 280px;
}

/* ==========================================================================
   Layout shared with PlanningPf / PlanningCrema (mirrored from their inline
   <style> blocks so this page renders identically without scoped duplication).
   ========================================================================== */

.planning-page-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.planning-nav-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cfl-space-sm);
    flex-wrap: wrap;
    padding: 8px var(--cfl-space-md);
    background: var(--cfl-gray-50, #f8fafc);
    border-bottom: 1px solid var(--cfl-border, #e2e8f0);
}

.planning-nav-left,
.planning-nav-right {
    display: flex;
    align-items: center;
    gap: var(--cfl-space-sm);
}

.planning-nav-toolbar .planning-date-picker {
    width: 180px;
}

.planning-column {
    flex: 1 1 400px;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #f5f5f5;
    border-radius: 4px;
    overflow: hidden;
}

.column-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #e8e8e8;
    border-bottom: 1px solid #d0d0d0;
    flex-shrink: 0;
}

.column-header {
    margin: 0;
    font-size: 1.1rem;
}

.column-content {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.planning-display-mode-group .planning-mode-active {
    font-weight: 700;
}

.planning-quick-links {
    display: flex;
    gap: var(--cfl-space-sm);
    flex-wrap: wrap;
    align-items: center;
    padding: var(--cfl-space-xs) var(--cfl-space-md);
    background: var(--cfl-gray-50);
    border-bottom: 1px solid var(--cfl-border);
}

.planning-quick-links .planning-current-link {
    opacity: 1 !important;
    cursor: default;
    font-weight: 600;
}

.planning-btn-short {
    display: none;
}

@media (max-width: 768px) {
    .ak-cfl-cf__row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .ak-cfl-cf__row-label {
        width: auto;
        min-width: 0;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px;
    }

    .ak-cfl-cf__row-counter {
        margin-top: 0;
        margin-left: auto;
    }

    .ak-cfl-cf__clusters {
        flex-direction: column;
        gap: 8px;
    }

    .ak-cfl-cf__cluster {
        padding: 0;
    }

    .ak-cfl-cf__cluster--aprem {
        border-left: none;
        border-top: 1px dashed var(--cfl-border, #e2e8f0);
        padding-top: 8px;
    }

    .ak-cfl-cf__row-action {
        border-left: none;
        border-top: 1px solid var(--cfl-border, #e2e8f0);
        padding-left: 0;
        padding-top: 8px;
        justify-content: flex-start;
    }

    .ak-cfl-cf__columns {
        flex-direction: column;
    }

    .planning-nav-toolbar {
        padding: 6px var(--cfl-space-sm);
    }

    .planning-btn-full {
        display: none;
    }

    .planning-btn-short {
        display: inline;
        font-weight: 600;
    }
}

/* ==========================================================================
   Layout rail vertical — page Plannings centre funéraire
   La section "Créneaux par lieu" passe en colonne gauche fixe (340px),
   le grid Matin/Après-midi prend tout l'espace restant à droite.
   ========================================================================== */

.ak-cfl-cf__layout--rail {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: var(--cfl-space-md);
    align-items: start;
    padding: var(--cfl-space-md);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Le rail (panel--rail) est sticky tant qu'il tient dans le viewport.
   Si le contenu dépasse, l'overflow interne prend le relais. */
.ak-cfl-cf__panel--rail {
    position: sticky;
    top: 0;
    max-height: 100%;
    overflow-y: auto;
    padding: var(--cfl-space-sm);
    border: 1px solid var(--cfl-border, #e2e8f0);
    border-radius: 6px;
    background: var(--cfl-gray-50, #f8fafc);
}

.ak-cfl-cf__panel--rail .ak-cfl-cf__panel-header {
    margin-bottom: var(--cfl-space-xs);
}

.ak-cfl-cf__panel--rail .ak-cfl-cf__panel-title {
    font-size: 0.95rem;
}

/* ─── Densification : chaque row passe en empilement vertical ───────────── */

.ak-cfl-cf__panel--rail .ak-cfl-cf__row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px 10px;
}

.ak-cfl-cf__panel--rail .ak-cfl-cf__row-label {
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 8px;
}

.ak-cfl-cf__panel--rail .ak-cfl-cf__row-name {
    font-size: 0.9rem;
}

.ak-cfl-cf__panel--rail .ak-cfl-cf__row-counter {
    margin-top: 0;
    margin-left: auto;
}

/* Clusters Matin / Après-midi empilés verticalement avec séparateur horizontal */
.ak-cfl-cf__panel--rail .ak-cfl-cf__clusters {
    flex-direction: column;
    gap: 6px;
}

.ak-cfl-cf__panel--rail .ak-cfl-cf__cluster {
    padding: 0;
}

.ak-cfl-cf__panel--rail .ak-cfl-cf__cluster--aprem {
    border-left: none;
    border-top: 1px dashed var(--cfl-border, #e2e8f0);
    padding-top: 6px;
}

.ak-cfl-cf__panel--rail .ak-cfl-cf__chip {
    padding: 2px 8px;
    font-size: 0.75rem;
}

.ak-cfl-cf__panel--rail .ak-cfl-cf__bloc {
    padding: 3px 8px;
    font-size: 0.75rem;
    max-width: 100%;
}

/* Bouton + déplacé en bas de la row */
.ak-cfl-cf__panel--rail .ak-cfl-cf__row-action {
    border-left: none;
    border-top: 1px solid var(--cfl-border, #e2e8f0);
    padding-left: 0;
    padding-top: 6px;
    justify-content: flex-end;
}

/* ─── Layout édition : rail (gauche) + éditeur (droite) côte à côte ─────── */

/* Pendant l'édition : le rail (gauche) coexiste avec l'éditeur (droite, pleine hauteur). */
.ak-cfl-cf__layout--rail-editing {
    align-items: stretch;        /* l'éditeur étire la cellule droite sur toute la hauteur */
    overflow-y: hidden;          /* l'éditeur gère son propre scroll interne */
}
.ak-cfl-cf__layout--rail-editing > .zone-edition-layout {
    min-height: 0;
    height: 100%;
}
/* En édition, masquer l'offset d'en-tête (header de page masqué) → l'éditeur prend la hauteur. */
.ak-cfl-cf__wrapper--editing { padding-top: 0; }

/* ─── Horaires du rail en colonne au breakpoint étroit (remplace le collapse icône) ── */

@media (max-width: 1366px) {
    .ak-cfl-cf__layout--rail {
        grid-template-columns: 240px minmax(0, 1fr);
        gap: var(--cfl-space-sm);
    }
    /* Horaires en colonne quand l'écran se resserre (au lieu de masquer les chips). */
    .ak-cfl-cf__panel--rail .ak-cfl-cf__chips {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* Sur très petit écran (< 768px), bascule en stack vertical complet (rail au-dessus du grid). */
@media (max-width: 767px) {
    .ak-cfl-cf__layout--rail {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--cfl-space-sm);
    }

    .ak-cfl-cf__panel--rail {
        position: static;
        max-height: none;
    }
}

/* ─── Cérémonie CF — édition (CeremonieCfEdition + ZoneSalleCeremonieEdition + sous-composant Lieu) ──── */

.ak-cfl-cf-edition {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
}

.ak-cfl-cf-edition__loading {
    padding: var(--cfl-space-md, 16px);
    color: var(--cfl-text-secondary, #64748b);
}

.ak-cfl-cf-edition__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border-bottom: 1px solid var(--cfl-border, #e2e8f0);
    min-height: 56px;
}

.ak-cfl-cf-edition__header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ak-cfl-cf-edition__header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ak-cfl-cf-edition__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--cfl-text-primary, #1a202c);
}

.ak-cfl-cf-edition__content {
    flex: 1;
    overflow: auto;
    padding: 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.ak-cfl-cf-edition__error {
    color: var(--cfl-error, #dc2626);
    font-size: 13px;
    margin-top: 4px;
}

/* Legacy "Salle" string (lecture seule) — partagé entre les éditions cérémonie */
.ak-cfl-legacy-lieu {
    margin-top: 8px;
}

.ak-cfl-legacy-lieu__label {
    display: block;
    font-size: 12px;
    font-style: italic;
    color: var(--cfl-text-secondary, #64748b);
    margin-bottom: 2px;
}

/* ─── ZoneSalleCeremonieEdition (V1) — layout legacy ──── */

.zone-edition-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
}

.zone-edition-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.zone-edition-sidebar {
    position: relative;
    width: 280px;
    min-width: 250px;
    background: #ffffff;
    border-right: 1px solid var(--cfl-border, #e2e8f0);
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.zone-edition-sidebar--collapsed { width: 26px; min-width: 26px; }
.cf-defunts-toggle {
    position: absolute; top: 8px; right: -1px;
    border: 1px solid var(--cfl-border, #e2e8f0); border-right: none;
    border-radius: 4px 0 0 4px; background: #fff; cursor: pointer;
    padding: 2px 6px; font-size: 12px; color: var(--cfl-text-secondary, #334155); z-index: 1;
}
.zone-edition-sidebar--collapsed .cf-defunts-toggle { right: auto; left: 0; border-radius: 0 4px 4px 0; }

.zone-edition-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.zone-edition-main-content {
    flex: 1;
    overflow: auto;
    padding: 16px;
}

.zone-edition-main-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--cfl-border-light, #f1f5f9);
    background: #ffffff;
}

.zone-edition-main-footer .hk-floating-label {
    width: 100%;
}

/* Force-delete preview — modales de suppression des plannings DÉDIÉS
   (salle / PF / crématorium / convivialité). Pas la modale centre funéraire. */

.ak-force-delete-preview p {
    margin: 0 0 8px;
    font-size: 14px;
}

.ak-force-delete-list {
    margin: 4px 0 12px;
    padding-left: 20px;
}

.ak-force-delete-list li {
    margin-bottom: 4px;
    font-size: 13px;
}

.ak-force-delete-list--reset li {
    color: var(--cfl-text-primary, #1a202c);
}

.ak-force-delete-list--skipped li {
    color: #64748b;
}

.ak-force-delete-reason {
    font-style: italic;
    font-size: 12px;
}

/* ─── Réservation centre funéraire en pleine page (CentreFuneraireZoneEdition) ─── */

/* Rendue désormais en pleine page (et non plus dans un HkDialog) : le root .zone-edition-layout
   (height: 100%) remplit la zone de contenu, comme les autres éditions de planning. L'en-tête est
   désormais le composant partagé ZoneEditionHeader (qui porte ses propres styles d'en-tête). */

.zone-edition-main-top {
    padding: 12px 16px;
    border-bottom: 1px solid var(--cfl-border-light, #f1f5f9);
    background: #ffffff;
    flex-shrink: 0;
}

.cf-zone-identity {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--cfl-space-md);
    /* Aligné en haut : rythme vertical stable même quand un champ affiche une ligne d'aide/erreur. */
    align-items: start;
}

.cf-zone-commentaire {
    margin-top: var(--cfl-space-md);
}

.cf-zone-commentaire .hk-floating-label {
    width: 100%;
}

/* Onglets d'opérations : composant Hikari HkTabStrip (les styles d'onglet/active/hover sont portés
   par Hikari). Le wrapper gère seulement le scroll horizontal et le rythme vertical. */
.cf-zone-tabs-wrapper {
    flex: 1;
    overflow: auto;
    padding: 0 16px 16px;
}

/* Bandeau d'avertissement quand une opération est staged pour suppression au prochain save. */
.cf-zone-delete-notice {
    margin: var(--cfl-space-sm) 0 0;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--hk-danger-50, #fef2f2);
    border: 1px solid var(--hk-danger-300, #fca5a5);
    color: var(--hk-danger-700, #b91c1c);
    font-size: 0.85rem;
}

/* Action « Supprimer la réservation » de l'onglet : détachée des champs par un filet, alignée
   à gauche (action destructive, distincte des actions globales Fermer / Enregistrer de l'en-tête). */
.cf-zone-tab-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: var(--cfl-space-md);
    padding-top: var(--cfl-space-md);
    border-top: 1px solid var(--cfl-border-light, #f1f5f9);
}

.cf-zone-halfday {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

/* ─── Sélecteur de créneaux libres groupé par lieu (Task 6) ─────────────── */

.cf-lieu-slot-picker { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.cf-lieu-slot-group { border: 1px solid var(--cfl-border, #e2e8f0); border-radius: 6px; padding: 6px 8px; background: var(--cfl-gray-50, #f8fafc); }
.cf-lieu-slot-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.cf-lieu-slot-name { font-size: 0.85rem; font-weight: 600; color: var(--cfl-text-primary, #0f172a); }
.cf-lieu-slot-count { font-size: 0.7rem; color: var(--cfl-success, #16a34a); }
.cf-lieu-slot-picks { display: flex; flex-wrap: wrap; gap: 4px; }
.cf-lieu-slot { font-size: 0.8rem; padding: 3px 9px; border: 1px solid var(--cfl-primary, #2563eb); border-radius: 5px; background: #fff; color: #1e3a8a; cursor: pointer; }
.cf-lieu-slot.selected { background: var(--cfl-primary, #2563eb); color: #fff; }

/* Lignes à 2 colonnes des onglets Départ / Cérémonie. Le gap vertical inter-champs est géré
   par le panel (.hk-panel__body { gap }), donc pas de margin-bottom ici (évite le double espace). */
.cf-zone-tabs-wrapper .input-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cfl-space-md) 20px;
}

/* ─── Zone de commentaire dans les colonnes Matin / Après-midi du planning CF ── */

/* Partagé avec PlanningCremaComponent (scoped dans la crema). Ici, version globale pour
   CentreFuneraireZonesGrid qui n'a pas de bloc <style> scoped. */
.planning-comment-textarea {
    min-height: 60px;
    flex-shrink: 0;
}

.column-comments {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    border-bottom: 1px solid #e0e0e0;
}

.column-comment-readonly {
    background: #f0f4f8;
    border-radius: 4px;
    padding: 4px 8px;
}

.column-comment-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #555;
}

.column-comment-text {
    white-space: pre-wrap;
    font-size: 0.85rem;
}