/*
 * Cachet template — light violet full-height RIGHT sidebar, single main column.
 * Shared by browser (edit) and mPDF (pdf). No flexbox, no CSS grid: the two
 * columns are a single table (main 66% / sidebar 34%), so the two renderers
 * agree. First template with the rail mirrored to the right.
 */

/* ---- page margins (multi-page) ---------------------------------------- *
 * PdfService gives mPDF margin_* = 0, so a PDF's only vertical margin is
 * this wrapper's own padding — and a wrapper's padding-top lands on page 1
 * alone, leaving every later page hard against the sheet edge.
 *
 * @page restores an identical margin on every page; `@page :first` zeroes
 * the top one so page 1 keeps using the wrapper padding it always had and
 * its output is unchanged. Left/right stay 0 — the wrapper's horizontal
 * padding already applies to every page. Inert in the browser (@page is
 * print-only), and builder.js reads these same values back out of CSSOM
 * so its page-count model matches what mPDF actually does. */
/* The violet rail. An @page background covers the FULL sheet and is repainted
   per page, so the band reaches the bottom of every page including the last —
   which the old fixed-height <td> background could never do beyond page 1.
   The 1px inner-edge hairline is baked INTO the PNG: it used to be a
   border-left on the sidebar <td>, and a float only exists on page 1, so a CSS
   border would vanish on pages 2+. Regenerate with
   scripts/generate-band-assets.php; basepath-relative URL because PdfService
   calls SetBasePath(public/). */
@page {
    margin: 40px 0 40px 0;
    background: url('assets/img/templates/bands/cachet.png');
    background-image-resize: 6;
}
@page :first {
    margin-top: 0;
}

/* Edit mode only: @page is print-only. Mirrors the PNG, hairline included. */
.cv-layout--edit {
    background-image: linear-gradient(to right, #ffffff 0, #ffffff 66%, #ede4fb 66%, #ede4fb calc(66% + 1px), #faf5ff calc(66% + 1px));
}

.resume-page.resume-cachet {
    width: 794px;               /* A4 @ 96dpi -> fills A4 width in mPDF */
    box-sizing: border-box;
    /* Deliberately NO background: a wrapper background paints over the @page
       band for the whole extent of the flowed content, leaving the rail visible
       only in the blank tail of the last page. */
    color: #1f2937;
    font-family: 'DejaVu Sans', Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
}

/* mPDF does NOT inherit font-family/size into table cells — anything inside a
   <td> silently falls back to the serif document default (in-td trap class,
   2026-07 slate rework). This layout is table-based, so the font must be
   declared at td level too. No-op in the browser. */
.resume-cachet td {
    font-family: 'DejaVu Sans', Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: #1f2937;
}

/* ---- two-column layout: float, NOT a table ----------------------------
 * Was a two-cell single-row <table> so the sidebar <td> could carry a fixed
 * height + background. mPDF has no <tr> boundary to break at inside a lone
 * row, so long content was auto-shrunk to one page (measured: 4.1pt against a
 * declared 10.13pt) rather than paginated. The rail is the @page band now. */
.cv-layout {
    width: 100%;
}
.cv-layout:after {
    content: "";
    display: table;
    clear: both;
}
/* Each cell rule is self-sufficient (vertical-align on the td itself): a
   `> tr > td` child combinator never matches in the browser (it inserts a
   <tbody>), and without vertical-align:top mPDF centers the shorter column
   vertically in the full-height row (td default is middle). */

/* ---- main column (left, 66%) ------------------------------------------- */
/* margin-right (not a width) holds the column indent on pages 2+, where the
   float no longer exists but the band still paints under that strip. */
.cv-main {
    margin-right: 34%;
    /* Zero bottom: @page margin-bottom already reserves 40px on every page,
       including the last. Reserving it twice put ~80px of trailing space below
       the final entry and opened a blank final page on the FR sample. */
    padding: 40px 34px 0 40px;
}

.cv-header {
    margin-bottom: 22px;
    /* accent left border + padding-left set inline in the .php (accent is
       user-overridable via settings.accentColor). */
}
.cv-name {
    font-size: 27px;
    font-weight: bold;
    line-height: 1.15;
    margin: 0 0 4px;
    color: #111827;
}
.cv-jobtitle {
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.3px;
}

/* pdf-mode section title rows: a heading's border-bottom shrinks to its text
   width and its margins are dropped inside a <td> in mPDF — the single-cell
   table's td carries the dotted accent rule (set inline in the .php) and the
   margin. The uniform margin-top doubles as the inter-section gap; edit mode
   never renders .cv-title-row, so the browser is unaffected. */
.cv-title-row {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0 10px;
}
.cv-title-row td {
    padding: 0 0 4px;
}
.cv-title-row .cv-section-title {
    border-bottom: none;
    margin: 0;
    padding: 0;
}

.cv-section {
    margin-bottom: 18px;
}
/* Edit-mode section title: the dotted accent bottom rule is set inline in the
   .php; this carries size/spacing only. */
.cv-section-title {
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: #111827;
    margin: 0 0 10px;
    padding: 0 0 4px;
}
.cv-summary {
    text-align: left;
}

/* Entries: table in pdf mode / div in edit mode, same class (margins render
   on both element kinds in their respective renderer). */
/* Keep-together (skill §7). Spacing is margin-TOP via additive sibling
   selectors, never margin-bottom: margin-bottom on a many-times-repeated
   avoid block is double-counted in mPDF's pagination estimate and opens a
   blank trailing page (seen on riviera). */
.cv-item {
    position: relative;
    page-break-inside: avoid;
}
.cv-section-head-group + .cv-item,
.cv-item + .cv-item {
    margin-top: 14px;
}
/* mPDF ignores page-break-after:avoid on a heading alone. */
.cv-section-head-group {
    page-break-inside: avoid;
}
table.cv-item {
    width: 100%;
    border-collapse: collapse;
}
.cv-item-cell {
    position: relative;
    padding: 0;
}

/* Two-column "title left / dates right" via table (mPDF-safe). */
.cv-row {
    width: 100%;
    border-collapse: collapse;
}
.cv-row td {
    vertical-align: top;
    padding: 0;
}
.cv-row-main {
    text-align: left;
}
.resume-cachet .cv-row-side {
    text-align: right;
    /* NO white-space:nowrap. mPDF sizes a table from its cells' MINIMUM content
       widths, so a nowrap run wider than its column's share makes it scale that
       table's contents down instead of wrapping. Measured on the FR sample:
       experience entries 2 and 3 rendered at 6.9pt (68%) and 6.3pt (62%)
       against the declared 10.13pt, degrading per entry, while the page's
       median size stayed correct and hid it. A spelled-out French range
       ("septembre 2016 – février 2019") is wider than 30% anyway, so it wraps
       to a second right-aligned line instead. Third instance of this mechanism
       after riviera and sable. */
    width: 30%;
    color: #4b5563;
    font-size: 12px;
}
.cv-item-title {
    font-weight: bold;
}
.cv-item-org {
    font-style: italic;
    color: #374151;
}
.cv-item-sep {
    color: #374151;
    font-style: normal;
}
.cv-item-loc {
    font-style: italic;
}
.cv-dates {
    font-weight: bold;
}
.cv-item-details {
    margin-top: 3px;
}

/* Bullets (edit mode: real ul; pdf mode: one two-cell table per bullet — the
   fixed-width marker cell gives a hanging indent that survives mPDF inside the
   layout cell, li padding-left does not). */
.cv-bullets {
    margin: 5px 0 0;
    padding-left: 18px;
}
.cv-bullets li {
    margin-bottom: 2px;
    position: relative;
}
.cv-bullet {
    width: 100%;
    border-collapse: collapse;
    margin-top: 3px;
}
.resume-cachet .cv-bullet-mk {
    width: 16px;
    vertical-align: top;
    padding: 0;
    color: #7c3aed;
    font-size: 7px;
    line-height: 20px; /* centers the dot on the first 13.5px/1.5 text line */
}
.cv-bullet-tx {
    vertical-align: top;
    padding: 0;
}

/* Certifications (edit mode: inline items + float date; pdf mode: two-cell
   table per cert — the float doesn't float inside the layout cell in mPDF). */
.cv-inline-item {
    position: relative;
    margin-bottom: 4px;
}
.cv-item-side {
    float: right;
    width: 70px;
    color: #4b5563;
    font-size: 12px;
}
.cv-cert-row {
    width: 100%;
    border-collapse: collapse;
    margin-top: 4px;
}
.cv-cert-row td {
    vertical-align: top;
    padding: 0;
}
.resume-cachet .cv-cert-main {
    color: #1f2937;
}
.resume-cachet .cv-cert-side {
    width: 70px;
    text-align: right;
    color: #4b5563;
    font-size: 12px;
}
.cv-muted {
    color: #6b7280;
}

/* =====================================================================
 * Sidebar (right, 34%, light violet, full page height)
 * `height` (not `min-height`) is set directly on this <td>: mPDF ignores
 * min-height/height on a nested block *inside* a table cell for the cell's
 * painted background height, but DOES honor a CSS `height` on the <td>
 * itself, extending the tint to the full page. mPDF still lets the cell grow
 * taller if content needs it — height acts as a floor, not a clip. This whole
 * page is one single-row table, so genuinely long content is auto-shrunk to
 * one page (no page-2 sidebar-tint loss can occur); the practical risk is
 * tiny text on pathologically long resumes, hence the single-page copy in the
 * registry (same behavior as onyx).
 * ===================================================================== */
/* ---- sidebar (right, 34%) ---------------------------------------------
 * No background, no height, no border here any more: all three used to paint
 * the rail, and the height+background pair forced the un-paginatable table.
 * Colour and hairline both come from the @page band, which repeats per page. */
.cv-sidebar {
    float: right;
    width: 34%;
    box-sizing: border-box;
    padding: 30px 26px;
}
.cv-sidebar-inner {
    box-sizing: border-box;
}
/* Sidebar cell text sizing (color stays the dark base — this is a LIGHT
   sidebar, unlike onyx's dark rail). */
.resume-cachet .cv-sidebar td {
    color: #1f2937;
    font-size: 12px;
    line-height: 1.5;
}

/* Photo slot: single-cell table so the slot keeps its geometry inside the
   sidebar cell (block margins are dropped there); the gap below comes from
   the first title row's uniform margin-top. */
.cv-photo-wrap {
    border-collapse: collapse;
    margin: 0 auto;
}
.cv-photo-wrap td {
    padding: 0;
    text-align: center;
}
.cv-photo,
.cv-photo-initials {
    display: block;
    margin: 0 auto;
}

/* Side sections: the inter-section gap is the title row's uniform margin-top
   (block margins on the .cv-side-section div are dropped inside the sidebar
   cell in mPDF; a nested table's margin renders in both). */
.cv-side-section {
    margin-bottom: 0;
}
.cv-side-title-row {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0 10px;
}
.cv-side-title-row td {
    border-bottom: 1px solid #ddc9f5;
    padding: 0 0 5px;
}
.cv-side-title {
    font-size: 11.5px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    color: #7c3aed;
    border-bottom: none;
    margin: 0;
    padding: 0;
}

/* Contact list: glyph + text. In pdf mode each item is a single-cell table
   (block margins are dropped inside the sidebar cell); in edit mode it stays a
   div — the shared class carries the margin, honored on both element kinds. */
.cv-contact-list {
    font-size: 12px;
}
.cv-contact-item {
    color: #374151;
    margin-bottom: 7px;
    word-wrap: break-word;
}
table.cv-contact-item {
    width: 100%;
    border-collapse: collapse;
}
.cv-contact-item td {
    padding: 0;
}
.cv-icon {
    display: inline-block;
    margin-right: 5px;
    color: #7c3aed;
}
.cv-icon.cv-icon-linkedin {
    display: inline-block;
    width: 12px;
    height: 12px;
    line-height: 12px;
    font-size: 8px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    border-radius: 2px;
    margin-right: 5px;
}

/* Education in sidebar: degree bold, school italic, field + dates small.
   Table in pdf mode / div in edit mode, same class. */
.cv-side-edu {
    position: relative;
    margin-bottom: 12px;
}
table.cv-side-edu {
    width: 100%;
    border-collapse: collapse;
}
.cv-side-edu td {
    padding: 0;
}
.cv-side-edu-degree {
    font-weight: bold;
    color: #111827;
    font-size: 12.5px;
}
.cv-side-edu-school {
    font-style: italic;
    color: #374151;
    font-size: 12px;
    margin-top: 1px;
}
.cv-side-edu-field {
    color: #4b5563;
    font-size: 11.5px;
    margin-top: 1px;
}
.cv-side-edu-dates {
    color: #6b7280;
    font-size: 11px;
    margin-top: 2px;
}

/* Languages in sidebar: name bold, dots (or free text) beneath. */
.cv-side-lang {
    position: relative;
    margin-bottom: 10px;
}
table.cv-side-lang {
    width: 100%;
    border-collapse: collapse;
}
.cv-side-lang td {
    padding: 0;
}
.cv-side-lang-name {
    font-weight: bold;
    color: #111827;
    font-size: 12.5px;
}
.cv-side-lang-level {
    margin-top: 2px;
    color: #6b7280;
    font-size: 11.5px;
}

/* Skills in sidebar: plain list, one per line. */
.cv-side-skill {
    position: relative;
    margin-bottom: 6px;
}
table.cv-side-skill {
    width: 100%;
    border-collapse: collapse;
}
.cv-side-skill td {
    padding: 0;
    color: #374151;
    font-size: 12px;
}
.cv-side-skill-name {
    color: #374151;
    font-size: 12px;
}

/* Level dots (tpl_dots): on-color set inline (accent); off is a soft violet. */
.cv-level {
    white-space: nowrap;
}
.cv-dot {
    font-size: 9px;
    letter-spacing: 1px;
}
.cv-dot-on {
    color: #7c3aed;
}
.cv-dot-off {
    color: #d8c8f0;
}

/* =====================================================================
 * Edit-mode affordances (browser only — these elements are never emitted
 * in pdf mode, so none of this reaches mPDF).
 * ===================================================================== */

[contenteditable][data-ph]:empty:before {
    content: attr(data-ph);
    color: #b7b7b7;
    font-style: italic;
    pointer-events: none;
}
.cv-sidebar [contenteditable][data-ph]:empty:before {
    color: #a98fd0;
}
[contenteditable] {
    outline: none;
    border-radius: 2px;
    transition: box-shadow 0.12s ease, background 0.12s ease;
}
[contenteditable]:hover {
    box-shadow: 0 0 0 1px #e3d3fb;
}
[contenteditable]:focus {
    box-shadow: 0 0 0 2px #7c3aed;
    background: #faf5ff;
}

/* Level dot editor (languages) */
.cv-dot-btn {
    font-family: inherit;
    font-size: 10px;
    line-height: 1;
    width: 12px;
    height: 12px;
    padding: 0;
    margin: 0 1px;
    border: none;
    background: none;
    cursor: pointer;
}
.cv-dot-btn.cv-dot-on {
    color: #7c3aed;
}
.cv-dot-btn.cv-dot-off {
    color: #d8c8f0;
}
.cv-level-toggle {
    font-family: inherit;
    font-size: 9px;
    line-height: 1;
    padding: 1px 3px;
    margin-left: 3px;
    border: 1px solid #cbb6ec;
    background: #fff;
    color: #7c3aed;
    border-radius: 2px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.cv-side-lang:hover .cv-level-toggle {
    opacity: 1;
}

/* add / remove / reorder controls */
.edit-controls {
    position: absolute;
    top: -2px;
    right: -44px;
    opacity: 0;
    transition: opacity 0.12s ease;
    white-space: nowrap;
    z-index: 5;
}
.edit-controls--inline {
    position: absolute;
    left: -26px;
    right: auto;
    top: 0;
}
/* Sidebar sits on the right edge — hang its inline controls on the LEFT of
   the item so they don't fall off the page. */
.cv-sidebar .edit-controls--inline {
    left: -22px;
    right: auto;
}
.cv-item:hover > .edit-controls,
.cv-inline-item:hover > .edit-controls,
.cv-side-edu:hover > .edit-controls,
.cv-side-lang:hover > .edit-controls,
.cv-side-skill:hover > .edit-controls,
.cv-bullets li:hover > .edit-controls,
.edit-controls:hover {
    opacity: 1;
}
.edit-controls button {
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    width: 20px;
    height: 20px;
    margin-left: 2px;
    padding: 0;
    border: 1px solid #ccc;
    background: #fff;
    color: #444;
    border-radius: 3px;
    cursor: pointer;
}
.edit-controls button:hover {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
}

.cv-add {
    font-family: inherit;
    font-size: 12.5px;
    margin-top: 6px;
    padding: 4px 10px;
    border: 1px dashed #c4a9ef;
    background: #fff;
    color: #7c3aed;
    border-radius: 4px;
    cursor: pointer;
}
.cv-add:hover {
    background: #faf5ff;
    border-color: #7c3aed;
}
.cv-add--sm {
    font-size: 11.5px;
    padding: 2px 8px;
}
.cv-add--side {
    border-color: #cbb6ec;
    background: transparent;
}

.cv-current {
    display: block;
    font-family: inherit;
    font-size: 11px;
    font-weight: normal;
    color: #777;
    margin-top: 2px;
    white-space: nowrap;
    cursor: pointer;
}
.cv-current input {
    vertical-align: middle;
}