/* ==========================================================================
   modules.css — styles for the commercial, scheduling and support modules.
   Loaded only by the pages that use them, so the original stylesheets stay
   untouched. Everything here reuses the existing tokens; nothing introduces
   a new colour, radius or spacing value.
   ========================================================================== */

/* --- page head action clusters --- */
.head-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

/* --- invoice line editor --- */
.line-editor {
    margin-top: var(--sp-4);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: var(--sp-3);
}

.line-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.line-head h4 { font-size: var(--fs-sm); }

.line-item {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1.2fr) auto;
    gap: var(--sp-2);
    align-items: end;
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--hairline);
}

.line-item:last-child { border-bottom: 0; }
.line-item .field { margin: 0; }
.line-del { margin-bottom: 2px; }

/* --- totals --- */
.inv-sum {
    margin-top: var(--sp-4);
    border-top: 1px solid var(--hairline);
    padding-top: var(--sp-3);
    display: grid;
    gap: var(--sp-1);
}

.inv-sum-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
}

.inv-sum-row b { font-weight: 600; }

.inv-sum-row.is-total {
    border-top: 1px solid var(--hairline);
    padding-top: var(--sp-2);
    font-size: var(--fs-md);
}

/* --- message composer --- */
.msg-preview {
    border: 1px dashed var(--hairline);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    background: var(--surface-container-lowest);
    display: grid;
    gap: var(--sp-1);
}

.msg-preview-label,
.msg-preview-to {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
}

.msg-preview-body {
    margin: 0;
    font-size: var(--fs-sm);
    white-space: pre-wrap;
}

.cell-clamp {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- support thread --- */
.ticket-facts {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--sp-3);
}

.thread { display: grid; gap: var(--sp-2); }

.thread-item {
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    background: var(--surface-container-lowest);
}

.thread-item.is-mine {
    border-color: var(--primary);
    background: var(--primary-subtle);
}

.thread-meta {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    margin-bottom: var(--sp-1);
}

.thread-text {
    margin: 0;
    font-size: var(--fs-sm);
    white-space: pre-wrap;
}

/* --- day schedule --- */
.day-slots { display: grid; }

.slot {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--hairline);
}

.slot:last-child { border-bottom: 0; }

.slot-time {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    padding-top: var(--sp-1);
    font-variant-numeric: tabular-nums;
}

.slot-body { display: grid; gap: var(--sp-2); }

.slot-card {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-3);
}

.slot-card-main {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 2px;
}

.slot-card-main > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slot-empty {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    border: 1px dashed var(--hairline);
    border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-3);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    cursor: pointer;
    text-align: start;
}

.slot-empty:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* --- narrow screens: the line editor and the schedule stack --- */
@media (max-width: 720px) {
    .line-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .line-item .field:first-child { grid-column: 1 / -1; }
    .line-del { grid-column: 1 / -1; justify-self: end; }
    .slot { grid-template-columns: 56px minmax(0, 1fr); }
}
.wizard-steps{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.wizard-steps span{padding:8px 12px;border-radius:999px;background:var(--surface-container,#f1f3f5);font-size:.85rem}.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.choice-card{border:1px solid var(--outline-variant,#ddd);border-radius:16px;padding:24px;display:grid;gap:8px;cursor:pointer}.choice-card:has(input:checked){border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 18%,transparent)}.choice-card input{width:18px;height:18px}.stack-list{display:grid;gap:8px;margin-top:16px}.list-row{display:grid;grid-template-columns:minmax(140px,1fr) minmax(180px,2fr) auto;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--outline-variant,#ddd);border-radius:12px}.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}@media(max-width:700px){.choice-grid{grid-template-columns:1fr}.list-row{grid-template-columns:1fr auto}.list-row span{grid-column:1/-1}}
.customer-file-center{display:grid;gap:16px;margin-top:16px}.doc-group{border:1px solid var(--border,#e5e7eb);border-radius:12px;padding:12px;margin-bottom:12px}.doc-group h4{margin:0 0 10px;display:flex;align-items:center;gap:8px}.person-file-card{border:1px solid var(--border,#e5e7eb);border-radius:14px;padding:14px;margin-bottom:14px}.person-file-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.person-file-head>div:first-child{display:flex;flex-direction:column;gap:4px}.row-actions{display:flex;align-items:center;gap:6px}@media(max-width:700px){.person-file-head{align-items:flex-start;flex-direction:column}}
.asset-card{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--outline-variant);border-radius:var(--r-sm);margin:8px 0}.asset-card>div:nth-child(2){flex:1}.asset-card span{display:block;color:var(--text-muted);font-size:12px;margin-top:4px}.asset-thumb{width:64px;height:64px;object-fit:contain;border-radius:var(--r-sm);background:var(--surface-container-low);padding:6px}.asset-placeholder{display:grid;place-items:center;color:var(--text-muted)}
.doc-check{width:18px;height:18px}.doc-preview{max-width:90vw;max-height:72vh;display:block;margin:auto}.date-tools{display:flex;gap:6px;align-items:center;margin-top:6px}.date-tools .btn{padding:5px 9px}.search-select-box{margin-bottom:7px}.search-select-box input{height:36px}
.cs:has(.cs-search){display:grid;grid-template-columns:minmax(140px,.8fr) minmax(180px,1.2fr);gap:8px}.cs-search{min-width:0}@media(max-width:640px){.cs:has(.cs-search){grid-template-columns:1fr}}
.ss-control{display:flex;gap:6px;align-items:center}.ss-control input{flex:1;min-width:0}.ss-clear{flex:0 0 auto;color:var(--on-surface-variant)}
.ss-chip{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border:1px solid var(--outline-variant);border-radius:var(--r-sm);background:var(--primary-subtle);font-size:var(--fs-sm);color:var(--on-surface)}
.ss-chip .btn{color:var(--on-surface-variant)}
.ss-list{list-style:none;margin:6px 0 0;padding:var(--sp-2);max-height:260px;overflow:auto;border:1px solid var(--outline-variant);border-radius:var(--r-sm);background:var(--surface-container-lowest);box-shadow:var(--elevation-2)}
.ss-item{display:flex;flex-direction:column;gap:2px;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);font-size:var(--fs-sm);color:var(--on-surface);cursor:pointer}
.ss-item.is-active,.ss-item:hover{background:var(--hover-wash)}
.ss-item-sub{font-size:var(--fs-xs);color:var(--on-surface-variant)}
.ss-item mark{background:transparent;color:var(--primary);font-weight:700}
.ss-note{margin:6px 0 0;font-size:var(--fs-xs);color:var(--on-surface-variant)}

/* --------------------------------------------------------------------------
   A4 letter sheet
   --------------------------------------------------------------------------
   The geometry comes from the server's render contract (GET /letters/:id/render):
   a 210x297mm sheet with 22/22/25mm padding, an 8mm band at each edge, a 26mm
   logo box, the greeting above the body, and two 65mm signature areas. The
   numbers here are variables so the print rules can shift the whole sheet by
   exactly the paper margin and leave every absolutely positioned element where
   the screen put it.

   Printing keeps @page's 12mm margin — shared with the invoice sheet, which
   relies on it — and gives back the remainder, so the ink lands on the same
   coordinates the preview shows.
   -------------------------------------------------------------------------- */
.letter-sheet{--pad-top:14mm;--pad-right:22mm;--pad-bottom:25mm;--pad-left:22mm;position:relative;width:210mm;max-width:100%;min-height:297mm;margin-inline:auto;padding:var(--pad-top) var(--pad-right) var(--pad-bottom) var(--pad-left);background:#fff;color:#20242a;border:1px solid var(--hairline);border-radius:var(--r-md);font-size:13px;line-height:2.25;overflow:hidden}
.letter-band{position:absolute;top:0;right:0;left:0;height:8mm;border-top:4mm solid var(--accent,#183b5b);border-bottom:1.5mm solid var(--accent-2,#4aa7a3)}
.letter-band.is-foot{top:auto;bottom:0;border-top:1.5mm solid var(--accent-2,#4aa7a3);border-bottom:4mm solid var(--accent,#183b5b)}
.letter-logo{display:flex;align-items:center;justify-content:center;min-height:20mm}
.letter-logo img{width:20mm;height:20mm;object-fit:contain}
.letter-org{font-size:18px;font-weight:700;text-align:center;margin-top:1mm;color:#16181d}
.letter-org-sub{font-size:11px;text-align:center;color:#5b6169}
.letter-meta{position:absolute;top:calc(var(--pad-top) + 1mm);left:calc(var(--pad-left) - 2mm);text-align:start;font-size:12px;line-height:2.1;color:#5b6169}
.letter-meta b{color:#16181d;font-weight:600}
.letter-rule{height:1px;background:var(--accent,#183b5b);opacity:.45;margin:3mm 0 7mm}
.letter-recipient{font-size:16px;font-weight:700;margin-bottom:3mm}
.letter-subject{font-size:14px;font-weight:700;margin:0 0 5mm}
.letter-greeting{font-weight:700;margin:0 0 3mm}
.letter-body{font-size:13px;line-height:2.25;white-space:pre-line;text-align:justify;min-height:80mm}
.letter-block-label{font-weight:700;margin-top:var(--sp-3)}
.letter-signs{display:flex;justify-content:space-between;gap:25mm;margin-top:7mm}
.letter-sign{width:65mm;min-height:27mm;text-align:center}
.letter-sign-title{font-weight:700;border-bottom:1px dashed #aaa;padding-bottom:2mm;margin-bottom:3mm}
.letter-sign img{max-width:45mm;max-height:20mm;object-fit:contain}
.letter-sign-empty{font-size:11px;color:#8a9099}
.letter-footer{position:absolute;bottom:7mm;left:14mm;right:14mm;display:flex;align-items:center;justify-content:center;gap:8mm;flex-wrap:wrap;text-align:center;font-size:9px;color:#555;z-index:2}.letter-footer-item{display:inline-flex;align-items:center;gap:1.5mm}.letter-footer-item svg{width:12px;height:12px}

@media print {
    /* The paper supplies 12mm; the sheet gives back the rest of the contract's
       22/22/25mm. Moving the variables moves the meta block and the footer with
       it, so nothing has to be repositioned a second time. */
    .letter-sheet{--pad-top:8mm;--pad-right:10mm;--pad-bottom:18mm;--pad-left:10mm;width:100%;min-height:273mm;margin:0;border:0;border-radius:0;overflow:visible;-webkit-print-color-adjust:exact;print-color-adjust:exact}
    .letter-signs{break-inside:avoid}
    .letter-meta,.letter-footer,.letter-band{display:block}
}

.selected-recipient-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.recipient-chip{font-size:11px;padding:4px 8px;border-radius:999px;background:var(--surface-variant);border:1px solid var(--hairline)}

/* CRM polish v3 */
.customer-filter-grid{display:grid!important;grid-template-columns:minmax(190px,1.35fr) repeat(5,minmax(120px,1fr)) auto;gap:8px!important;align-items:end!important;padding:12px 14px;overflow:visible}.customer-filter-grid>.field{width:100%;overflow:hidden}.customer-filter-grid .cs,.customer-filter-grid .cs-btn,.customer-filter-grid .select{width:100%;max-width:100%;min-width:0}
.customer-filter-grid>.field,.customer-filter-grid>.search-box{min-width:0!important;margin:0!important}
.customer-filter-grid .cs:has(.cs-search){display:block!important}
.customer-filter-grid .cs-search{display:none!important}
.customer-filter-grid .input,.customer-filter-grid .select,.customer-filter-grid .cs-btn,.customer-filter-grid .search-box{min-height:42px}
.customer-filter-grid .search-box{width:100%!important;flex:none!important}
.customer-filter-grid .search-box input{min-width:0;width:100%}
.renewal-alerts{margin:0 0 16px;border:1px solid color-mix(in srgb,var(--warning,#e6a700) 45%,var(--hairline));background:color-mix(in srgb,var(--warning,#e6a700) 8%,var(--surface))}
.renewal-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--hairline)}
.renewal-row:last-child{border-bottom:0}.renewal-days{font-weight:800;color:var(--warning,#b56b00)}.renewal-days.urgent{color:var(--error)}
.letter-sheet.letter-brand-template{--accent:#17384b;--accent-2:#c71924;--pad-top:18mm;--pad-right:22mm;--pad-bottom:28mm;--pad-left:22mm;border-radius:0;overflow:hidden}
.letter-brand-template .letter-band{height:4mm;border:0;background:#17384b}
.letter-brand-template .letter-band:after{content:"";position:absolute;top:4mm;right:0;left:0;height:1.2mm;background:#e8edf0}
.letter-brand-template .letter-band.is-foot{height:3mm;top:auto;bottom:0;background:#17384b}
.letter-brand-template:before{content:"";position:absolute;left:-7mm;top:28mm;width:22mm;height:70mm;background:linear-gradient(145deg,#17384b 0 28%,#d71920 29% 57%,#9f111b 58% 72%,transparent 73%);transform:skewY(-18deg);z-index:0}
.letter-brand-template:after{content:"";position:absolute;right:-8mm;bottom:18mm;width:25mm;height:58mm;background:linear-gradient(145deg,transparent 0 28%,#d71920 29% 55%,#17384b 56% 76%,transparent 77%);transform:skewY(18deg);z-index:0}
.letter-brand-template .letter-logo,.letter-brand-template .letter-org,.letter-brand-template .letter-meta,.letter-brand-template .letter-rule,.letter-brand-template .letter-recipient,.letter-brand-template .letter-subject,.letter-brand-template .letter-greeting,.letter-brand-template .letter-body,.letter-brand-template .letter-signs,.letter-brand-template .letter-footer{position:relative;z-index:1}
.letter-brand-template .letter-logo{min-height:18mm;margin-top:0}.letter-brand-template .letter-logo img{width:18mm;height:18mm}
.letter-brand-template .letter-org{font-size:17px;margin-top:0}.letter-brand-template .letter-meta{position:absolute;top:32mm;left:24mm;font-size:11px;line-height:2.15}
.letter-brand-template .letter-rule{margin:5mm 0 8mm;background:#17384b;opacity:.9}.letter-brand-template .letter-body{min-height:72mm}
.letter-brand-template .letter-footer{bottom:8mm;left:25mm;right:25mm;font-size:11px;font-weight:600;color:#17384b;line-height:1.8}
.letter-page-no{display:none!important}
@media print{
 @page{size:A4;margin:0}
 body{background:#fff!important}
 .doc-chrome{display:none!important}
 .letter-sheet.letter-brand-template{width:210mm!important;height:297mm!important;min-height:297mm!important;max-height:297mm!important;margin:0!important;padding:18mm 22mm 25mm!important;border:0!important;box-shadow:none!important;overflow:hidden!important;break-after:auto!important;page-break-after:auto!important}
}
.account-btn .avatar,.sidebar-user .avatar{flex:0 0 auto;overflow:hidden}
.sidebar-user{overflow:hidden}.sidebar-user-info{min-width:0}
.message-recipient-picker{border:1px solid var(--hairline);border-radius:14px;padding:10px;background:var(--surface-container-lowest)}
.prepared-message-panel{border:1px solid var(--hairline);border-radius:16px;padding:16px;background:var(--surface-container-low)}
@media(max-width:900px){.customer-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.customer-filter-grid>.search-box{grid-column:1/-1}}
@media(max-width:650px){.customer-filter-grid{grid-template-columns:1fr}}

.archive-row{grid-template-columns:minmax(0,1fr) auto}.archive-row>.toolbar{margin:0;flex-wrap:nowrap}
@media(max-width:700px){.archive-row{grid-template-columns:1fr}.archive-row>.toolbar{justify-content:flex-start}}

/* ========================================================================
   Letter print pagination fix
   ======================================================================== */

.letter-brand-template .letter-footer{
    left:25mm;
    right:25mm;
    justify-content:center;
    text-align:center;
}

.letter-page-no{
    display:none;
}

/* Signatures belong to the end of the letter and must stay together. */
.letter-signs,
.letter-sign{
    break-inside:avoid;
    page-break-inside:avoid;
}

@media print {

    /* Never print application chrome / floating AI controls. */
    #crmAiCopilot,
    .crm-ai,
    .crm-ai-fab,
    .crm-ai-panel,
    .no-print,
    .doc-chrome,
    .letter-print-tools{
        display:none !important;
    }

    html,
    body{
        background:#fff !important;
        height:auto !important;
        overflow:visible !important;
    }

    /*
     * Critical fix:
     * the previous rule forced every letter into exactly 297mm and clipped
     * overflow. The sheet must be allowed to grow so Chromium can create
     * page 2, 3, ... naturally.
     */
    .letter-sheet.letter-brand-template{
        width:210mm !important;
        height:auto !important;
        min-height:297mm !important;
        max-height:none !important;
        margin:0 !important;
        padding:18mm 22mm 25mm !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
        overflow:visible !important;
        break-after:auto !important;
        page-break-after:auto !important;
    }

    .letter-brand-template .letter-body{
        min-height:0 !important;
        overflow:visible !important;
    }

    .letter-brand-template .letter-signs{
        position:relative !important;
        margin-top:7mm !important;
        break-inside:avoid !important;
        page-break-inside:avoid !important;
    }

    /*
     * Address/phone remain centered at the bottom area rather than under
     * either signature column.
     */
    .letter-brand-template .letter-footer{
        position:relative !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;
        width:100% !important;
        margin-top:12mm !important;
        padding-bottom:5mm !important;
        justify-content:center !important;
        text-align:center !important;
        break-inside:avoid !important;
        page-break-inside:avoid !important;
    }

    /*
     * Decoration is allowed to repeat through the printed sheet without
     * clipping the actual letter text.
     */
    .letter-brand-template .letter-band.is-foot{
        position:fixed !important;
        left:0 !important;
        right:0 !important;
        bottom:0 !important;
    }

    .letter-page-no{
        font-family:inherit;
        direction:rtl;
        text-align:center;
        font-size:9px;
        color:#66727c;
        margin:3mm auto 0;
    }

    .letter-is-multipage .letter-page-no{
        display:block !important;
    }
}
/* Document dossiers: existing theme tokens, responsive RTL layout. */
.dm-manager { overflow:hidden; }
.dm-header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px; border-bottom:1px solid var(--outline-variant, #ddd); }
.dm-header h3 { margin:6px 0; font-size:1.3rem; }
.dm-header p { margin:0; }
.dm-eyebrow { color:var(--primary); font-size:.8rem; font-weight:700; }
.dm-actions,.dm-summary,.dm-bulk,.dm-subfolders,.dm-row-actions,.dm-pagination { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.dm-filters { padding:20px 24px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; background:var(--surface-container-low,rgba(127,127,127,.035)); }
.dm-filters>label { display:flex; flex-direction:column; gap:7px; font-size:.82rem; min-width:0; }
.dm-filters>.btn { align-self:end; }
.dm-layout { display:grid; grid-template-columns:210px minmax(0,1fr); }
.dm-sidebar { border-inline-end:1px solid var(--outline-variant,#ddd); padding:16px; }
.dm-sidebar h4 { margin:0 0 12px; }
.dm-folder { display:flex; align-items:center; gap:8px; width:100%; text-align:start; font:inherit; font-size:.84rem; padding:11px; margin:3px 0; border:0; border-radius:10px; background:transparent; color:inherit; cursor:pointer; overflow-wrap:anywhere; }
.dm-folder svg { width:18px; height:18px; flex-shrink:0; }
.dm-folder:hover,.dm-folder.active { background:var(--primary-container,rgba(80,100,220,.12)); color:var(--on-primary-container,var(--primary)); }
.dm-content { min-width:0; padding:20px; }
.dm-summary { margin-bottom:16px; }
.dm-summary strong { flex:1; }
.dm-subfolders { margin-bottom:14px; }
.dm-bulk { padding:12px 0; border-block:1px solid var(--outline-variant,#ddd); font-size:.8rem; }
.dm-table-wrap { overflow-x:auto; }
.dm-table { width:100%; border-collapse:collapse; text-align:start; }
.dm-table th { color:var(--on-surface-variant,#777); font-size:.76rem; font-weight:500; padding:14px 8px; text-align:start; }
.dm-table td { padding:16px 8px; border-top:1px solid var(--outline-variant,#ddd); font-size:.84rem; vertical-align:middle; }
.dm-table td strong { display:block; overflow-wrap:anywhere; min-width:110px; }
.dm-table small { display:block; color:var(--on-surface-variant,#777); font-size:.73rem; margin-top:6px; overflow-wrap:anywhere; }
.dm-table tbody tr:hover { background:var(--surface-container-low,rgba(127,127,127,.035)); }
.dm-row-actions { min-width:170px; }
.dm-row-actions .btn { padding-inline:8px; }
.dm-pagination { justify-content:center; padding-top:20px; font-size:.85rem; }
.dm-manager[aria-busy=true] { opacity:.75; }
@media(max-width:1000px) { .dm-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } .dm-layout { grid-template-columns:165px minmax(0,1fr); } }
@media(max-width:650px) { .dm-header { align-items:flex-start; flex-direction:column; padding:16px; } .dm-filters { padding:16px; } .dm-layout { display:block; } .dm-sidebar { display:flex; gap:6px; overflow-x:auto; border-inline-end:0; border-bottom:1px solid var(--outline-variant,#ddd); } .dm-sidebar h4 { display:none; } .dm-folder { width:auto; flex-shrink:0; } .dm-content { padding:12px; } }