/* KPT Villa Hub: drawing-sheet palette. Ink for structure, glazing teal for actions,
   revision-cloud magenta reserved for catalog selections and highlights. */
:root{
  --ink:#1E2B3C; --ink-2:#2A3A50; --paper:#F2F4F6; --sheet:#FFFFFF; --line:#D5DCE3; --steel:#5A6677;
  --glaze:#17808A; --glaze-d:#11666E; --cloud:#C21F8F; --amber:#B7791F; --ok:#2E7D4F; --bad:#B3261E;
  --side-w:248px; --side-w-c:68px; --top-h:56px;
  --bs-primary:#17808A; --bs-primary-rgb:23,128,138; --bs-link-color:#11666E; --bs-link-hover-color:#0B4A50;
  --bs-body-font-family:'Barlow',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --bs-body-color:#1E2B3C; --bs-border-color:#D5DCE3;
}
html,body{height:100%}
body{background:var(--paper);font-size:15px}
h1,h2,h3,h4,h5,.brand-text strong,.topbar-title,.stat b{font-family:'Barlow Semi Condensed','Barlow',sans-serif}
.btn-primary{--bs-btn-bg:var(--glaze);--bs-btn-border-color:var(--glaze);--bs-btn-hover-bg:var(--glaze-d);--bs-btn-hover-border-color:var(--glaze-d);--bs-btn-active-bg:var(--glaze-d)}
.btn-outline-primary{--bs-btn-color:var(--glaze-d);--bs-btn-border-color:var(--glaze);--bs-btn-hover-bg:var(--glaze);--bs-btn-hover-border-color:var(--glaze)}
.form-control:focus,.form-select:focus{border-color:var(--glaze);box-shadow:0 0 0 .2rem rgba(23,128,138,.18)}
:focus-visible{outline:2px solid var(--glaze);outline-offset:2px}

/* ---------- Shell ---------- */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--side-w);background:var(--ink);color:#C9D3DE;position:fixed;inset:0 auto 0 0;z-index:1040;display:flex;flex-direction:column;
  transition:width .2s ease, transform .2s ease;padding-top:env(safe-area-inset-top,0px)}
.sidebar::after{content:"";position:absolute;top:0;right:0;width:7px;height:100%;
  background:repeating-linear-gradient(135deg,#8C99AA 0 1.5px,transparent 1.5px 6px);opacity:.55}
.brand{display:flex;align-items:center;gap:.7rem;padding:1rem 1rem .9rem;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.08)}
.brand-mark{font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;letter-spacing:.04em;border:2px solid #fff;padding:.15rem .4rem;font-size:.95rem;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1.1;white-space:nowrap}
.brand-text small{color:#8C99AA;font-size:.78rem}
.side-nav{flex:1;overflow-y:auto;padding:.5rem .6rem 1rem .5rem}
.nav-group-label{font-size:.75rem;color:#7D8A9C;padding:.9rem .7rem .3rem;white-space:nowrap}
.side-link{display:flex;align-items:center;gap:.75rem;padding:.55rem .7rem;color:#C9D3DE;text-decoration:none;border-radius:6px;white-space:nowrap;position:relative}
.side-link i{font-size:1.1rem;width:1.25rem;text-align:center;flex:none}
.side-link:hover{background:var(--ink-2);color:#fff}
.side-link.active{background:#fff;color:var(--ink);font-weight:600}
.side-link.active i{color:var(--glaze)}
.side-count{margin-left:auto;background:var(--cloud);color:#fff;font-size:.72rem;border-radius:10px;padding:0 .45rem;line-height:1.35rem}
.side-foot{padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom,0px));font-size:.75rem;color:#7D8A9C;border-top:1px solid rgba(255,255,255,.08);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.main{flex:1;margin-left:var(--side-w);min-width:0;transition:margin .2s ease}
.app.collapsed .sidebar{width:var(--side-w-c)}
.app.collapsed .main{margin-left:var(--side-w-c)}
.app.collapsed .brand-text,.app.collapsed .side-link span,.app.collapsed .nav-group-label,.app.collapsed .side-foot span{display:none}
.app.collapsed .nav-group-label{display:block;height:.6rem;padding:0}
.app.collapsed .side-count{position:absolute;top:2px;right:2px;font-size:.62rem;line-height:1rem}
.sidebar-backdrop{display:none}
.topbar{height:var(--top-h);background:var(--sheet);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.25rem;padding:0 .75rem;
  position:sticky;top:0;z-index:1020;padding-top:env(safe-area-inset-top,0px);box-sizing:content-box}
.topbar-title{font-weight:600;font-size:1.05rem;margin-left:.4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{border:0;background:transparent;width:40px;height:40px;border-radius:8px;color:var(--ink);font-size:1.15rem;display:inline-grid;place-items:center}
.icon-btn:hover{background:var(--paper)}
.user-chip{border:0;background:transparent;display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem;border-radius:8px;text-align:left;line-height:1.1}
.user-chip:hover{background:var(--paper)}
.user-chip small{display:block;color:var(--steel);font-size:.75rem}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:600}
.content{padding:1rem 1.5rem 3rem;max-width:1500px}
.crumbs .breadcrumb{font-size:.85rem;margin-bottom:.35rem}
.crumbs a{color:var(--steel);text-decoration:none}
.page-head{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:1rem}
.page-head h1{font-size:1.65rem;font-weight:600;margin:0;flex:1 1 auto}
.page-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.print-meta{display:none}

@media (max-width: 991.98px){
  .sidebar{transform:translateX(-100%);width:var(--side-w)}
  .main,.app.collapsed .main{margin-left:0}
  .app.collapsed .sidebar{width:var(--side-w)}
  .app.collapsed .brand-text,.app.collapsed .side-link span,.app.collapsed .side-foot span{display:initial}
  .app.collapsed .nav-group-label{display:block;height:auto;padding:.9rem .7rem .3rem}
  .app.mobile-open .sidebar{transform:none}
  .app.mobile-open .sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(30,43,60,.45);z-index:1030}
  .content{padding:.75rem .85rem 3rem}
  .page-head h1{font-size:1.35rem}
}

/* ---------- Components ---------- */
.panel{background:var(--sheet);border:1px solid var(--line);border-radius:8px;padding:1rem}
.panel + .panel{margin-top:1rem}
.panel-title{font-size:1.05rem;font-weight:600;margin:0 0 .75rem}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}
.filters .form-select,.filters .form-control{width:auto;min-width:150px}
.code-tag{font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;letter-spacing:.02em;border:1.5px solid var(--ink);padding:0 .35rem;border-radius:3px;white-space:nowrap;display:inline-block;line-height:1.35}
.code-tag.sub{border-style:dashed}
.zone-P{color:var(--glaze-d)} .zone-S{color:#6A4FA3}
.badge-status{display:inline-block;font-size:.78rem;font-weight:600;padding:.12rem .5rem;border-radius:4px;border:1px solid;white-space:nowrap}
.s-ok{color:var(--ok);border-color:#A9D3B9;background:#EEF7F1}
.s-warn{color:var(--amber);border-color:#E9CF9E;background:#FDF6EA}
.s-info{color:var(--glaze-d);border-color:#A8D3D7;background:#EAF5F6}
.s-bad{color:var(--bad);border-color:#EBB1AC;background:#FCEFEE}
.s-neutral{color:var(--steel);border-color:var(--line);background:#F6F8FA}
.s-cloud{color:var(--cloud);border-color:#EBB0D6;background:#FCEEF7}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:1rem}
.stat{background:var(--sheet);padding:.9rem 1rem;text-decoration:none;color:inherit;display:block}
.stat:hover{background:#FAFBFC}
.stat b{display:block;font-size:1.9rem;line-height:1.1}
.stat span{color:var(--steel);font-size:.9rem}
.stat.attn b{color:var(--cloud)}
.empty-state{text-align:center;padding:3rem 1rem;color:var(--steel)}
.empty-state i{font-size:2.5rem;display:block;margin-bottom:.5rem}
.act-btns{white-space:nowrap}
.act-btns .btn{padding:.15rem .45rem}
table.dataTable{font-size:.92rem}
table.dataTable thead th{background:#F6F8FA;border-bottom:1px solid var(--line)!important;font-weight:600}
.dt-buttons .btn{font-size:.85rem}
div.dataTables_wrapper div.dataTables_filter input{width:200px}
@media (max-width:575.98px){ div.dataTables_wrapper div.dataTables_filter input{width:100%} .filters .form-select,.filters .form-control{flex:1 1 140px;min-width:0} }
.floor-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.floor-strip > div{padding:.75rem 1rem;border-right:1px solid var(--line);background:var(--sheet)}
.floor-strip > div:last-child{border-right:0}
.floor-strip small{color:var(--steel)}
@media (max-width:767.98px){.floor-strip{grid-template-columns:repeat(2,1fr)} .floor-strip > div:nth-child(2){border-right:0} .floor-strip > div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
.feed{list-style:none;margin:0;padding:0}
.feed li{padding:.45rem 0;border-bottom:1px solid #EEF1F4;font-size:.92rem}
.feed li:last-child{border-bottom:0}
.feed small{color:var(--steel)}

/* ---------- Reports & charts ---------- */
.chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-bottom:1rem}
.chart-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.chart-grid .wide{grid-column:1/-1}
@media (max-width:1199.98px){.chart-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767.98px){.chart-grid,.chart-grid.three{grid-template-columns:1fr}}
.chart-card{background:var(--sheet);border:1px solid var(--line);border-radius:8px;padding:.9rem 1rem;min-width:0}
.chart-card h3{font-size:1rem;font-weight:600;margin:0 0 .6rem}
.chart-box{position:relative}
.chart-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--steel);font-size:.9rem;border:1px dashed var(--line);border-radius:6px}
.chart-data{margin-top:.5rem;font-size:.85rem}
.chart-data summary{color:var(--steel);cursor:pointer}
.report-section{font-size:1.15rem;font-weight:600;margin:1.25rem 0 .6rem;padding-bottom:.35rem;border-bottom:1px solid var(--line)}
.stat small{display:block;color:var(--steel);font-size:.78rem}

/* ---------- Catalogs ---------- */
.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.catalog-card{background:var(--sheet);border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.catalog-thumb{height:150px;background:#E9EDF1;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.catalog-thumb img{width:100%;height:100%;object-fit:cover}
.catalog-thumb canvas{max-width:100%;max-height:100%}
.catalog-card .body{padding:.75rem .85rem;flex:1}
.catalog-card h3{font-size:1.02rem;margin:0 0 .25rem}
.catalog-card .meta{color:var(--steel);font-size:.85rem}
.catalog-card .foot{padding:.6rem .85rem;border-top:1px solid #EEF1F4;display:flex;gap:.4rem;align-items:center}

.viewer{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:1rem;align-items:start}
@media (max-width:1199.98px){.viewer{grid-template-columns:1fr}}
.viewer-bar{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-bottom:.6rem}
.viewer-bar .form-control{width:64px}
.stage-scroll{overflow:auto;background:#DDE3E9;border:1px solid var(--line);border-radius:8px;padding:12px;max-height:78vh}
.page-stage{position:relative;margin:0 auto;background:#fff;box-shadow:0 1px 3px rgba(30,43,60,.25);width:fit-content}
.page-stage canvas,.page-stage img{display:block;max-width:none}
.overlay{position:absolute;inset:0}
.overlay.selecting{cursor:crosshair;touch-action:none}
.sel-box{position:absolute;border:2px dashed var(--cloud);background:rgba(194,31,143,.10);cursor:pointer}
.sel-box.approved{border:2px solid var(--ok);background:rgba(46,125,79,.10)}
.sel-box.focus{box-shadow:0 0 0 4px rgba(194,31,143,.35);animation:pulse 1.2s ease 2}
.sel-box .lbl{position:absolute;left:-2px;top:-2px;transform:translateY(-100%);background:var(--cloud);color:#fff;font-size:.75rem;padding:.05rem .4rem;border-radius:3px 3px 0 0;white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.sel-box.approved .lbl{background:var(--ok)}
.sel-box .price{position:absolute;right:4px;bottom:4px;background:#fff;color:var(--ink);border:1.5px solid var(--ink);font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;font-size:.95rem;padding:.05rem .45rem;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.sel-box .price small{font-weight:500;color:var(--steel);font-size:.72rem;display:block;line-height:1}
.drag-rect{position:absolute;border:2px solid var(--cloud);background:rgba(194,31,143,.18);pointer-events:none}
.overlay.selecting .sel-box{pointer-events:none;opacity:.6}
.sel-list{max-height:78vh;overflow:auto}
.sel-item{border:1px solid var(--line);border-left:4px solid var(--cloud);border-radius:6px;padding:.55rem .65rem;margin-bottom:.5rem;background:var(--sheet);cursor:pointer}
.sel-item.approved{border-left-color:var(--ok)}
.sel-item:hover{background:#FBF7FA}
.sel-item .t{font-weight:600}
.sel-item .m{font-size:.84rem;color:var(--steel)}
@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(194,31,143,.15)}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* ---------- Auth pages ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr)}
.auth-art{background:var(--ink);color:#fff;padding:3rem;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.auth-art::before{content:"";position:absolute;inset:0;background:
  linear-gradient(transparent 0 0),
  repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 28px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 28px)}
.auth-art .plan{position:absolute;top:12%;left:10%;width:60%;aspect-ratio:3/4;border:10px solid transparent;
  border-image:repeating-linear-gradient(135deg,#8C99AA 0 2px,transparent 2px 7px) 10;opacity:.6}
.auth-art .plan::after{content:"";position:absolute;left:30%;top:35%;width:40%;height:30%;border:2px dashed var(--cloud);border-radius:40% 30% 45% 35%}
.auth-art h1{font-size:2.6rem;font-weight:600;position:relative;max-width:16ch;line-height:1.1}
.auth-art p{position:relative;color:#B5C0CD;max-width:46ch}
.auth-form{display:flex;align-items:center;justify-content:center;padding:2rem;background:var(--sheet)}
.auth-form form{width:100%;max-width:380px}
.auth-form h2{font-weight:600;margin-bottom:.25rem}
.demo-list{font-size:.82rem;color:var(--steel);border-top:1px solid var(--line);margin-top:1.5rem;padding-top:1rem}
.demo-list code{color:var(--ink)}
@media (max-width:767.98px){.auth{grid-template-columns:1fr}.auth-art{min-height:200px;padding:1.5rem}.auth-art h1{font-size:1.7rem}.auth-art .plan{display:none}}

/* ---------- Print ---------- */
@media print{
  .sidebar,.sidebar-backdrop,.topbar,.no-print,.dt-buttons,.dataTables_filter,.dataTables_length,.dataTables_paginate,.dataTables_info,.filters,.act-btns,.crumbs,.page-actions,.viewer-bar,.toast-container{display:none!important}
  .main{margin:0!important}
  .content{padding:0;max-width:none}
  body{background:#fff;font-size:12px}
  .panel{border:0;padding:0}
  .print-meta{display:block;font-size:11px;color:#555;margin-bottom:8px}
  .stage-scroll{max-height:none;overflow:visible;border:0;padding:0;background:#fff}
  .sel-list{max-height:none}
  .viewer{grid-template-columns:1fr}
  table.dataTable{width:100%!important}
  .dtr-control::before{display:none!important}
  a[href]::after{content:none}
  .chart-grid,.chart-grid.three{grid-template-columns:1fr 1fr}
  .chart-card{break-inside:avoid;border:1px solid #ccc}
  .chart-data{display:none}
}

/* ---- Drawing materials & suggestions ---- */
.mat-sticky { position: sticky; top: 0; }
.mat-preview { border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 8px; background: #f6f6f4; overflow: hidden; min-height: 120px; }
.mat-canvas-wrap { position: relative; line-height: 0; }
.mat-canvas-wrap canvas, .mat-canvas-wrap img { width: 100%; height: auto; display: block; }
.mat-boxes { position: absolute; inset: 0; }
.mat-box { position: absolute; border: 1.5px solid rgba(214, 51, 132, .75); border-radius: 3px; cursor: pointer; transition: background .15s; }
.mat-box span { position: absolute; top: -9px; left: -7px; background: #d63384; color: #fff; font: 600 10px/16px sans-serif; min-width: 16px; text-align: center; border-radius: 8px; padding: 0 3px; }
.mat-box:hover, .mat-box.on { background: rgba(214, 51, 132, .18); border-width: 2.5px; }
.mat-card { border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 8px; margin-bottom: .6rem; background: #fff; }
.mat-card.selected { border-color: #d63384; box-shadow: 0 0 0 2px rgba(214, 51, 132, .15); }
.mat-card.inactive { opacity: .65; }
.mat-head { display: flex; gap: .75rem; align-items: flex-start; padding: .7rem .85rem; cursor: pointer; }
.mat-no { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: #d63384; color: #fff; font: 600 12px/24px sans-serif; text-align: center; }
.mat-el { font-weight: 600; }
.mat-ht { font-weight: 500; font-size: .8rem; color: #6c757d; margin-left: .35rem; }
.mat-spec { color: #495057; }
.mat-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.mat-body { padding: 0 .85rem .85rem 2.9rem; }
.sg { border-left: 3px solid #dee2e6; padding: .15rem 0 .15rem .7rem; margin-bottom: .75rem; }
.sg-top { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.sg-text, .sg-reply div { white-space: pre-wrap; overflow-wrap: anywhere; }
.sg-brand { font-size: .85rem; color: #6c757d; }
.sg-reply { margin-top: .35rem; padding: .4rem .6rem; background: #f1f5f4; border-radius: 6px; font-size: .9rem; }
.sg-reply-box { display: grid; grid-template-columns: 9.5rem 1fr auto; gap: .4rem; margin-top: .45rem; }
.sg-actions { display: flex; gap: .75rem; margin-top: .25rem; font-size: .8rem; }
.sg-form { border-top: 1px dashed #dee2e6; padding-top: .6rem; }
.mat-admin { margin-top: .75rem; display: flex; gap: .4rem; }
.mat-raw { white-space: pre-wrap; font-size: .8rem; background: #f6f6f4; padding: .75rem; border-radius: 6px; margin: 0; }
.min-w-0 { min-width: 0; }
@media (max-width: 575.98px) { .sg-reply-box { grid-template-columns: 1fr; } .mat-body { padding-left: .85rem; } }
@media (max-width: 991.98px) { .mat-sticky { position: static; } }

/* ---- Materials list: suggestions visible in the table ---- */
.sugg-card { border: 1px solid var(--bs-border-color, #dee2e6); background: #fff; border-radius: 10px; padding: .6rem .9rem; display: flex; align-items: baseline; gap: .6rem; text-align: left; cursor: pointer; }
.sugg-card:hover { border-color: #d63384; }
.sugg-card .n { font-size: 1.6rem; font-weight: 700; line-height: 1; }
#tbl tr.row-waiting > td:first-child { box-shadow: inset 4px 0 0 #ffc107; }
.sg-inline { border-left: 3px solid #dee2e6; padding: .1rem 0 .1rem .6rem; margin-bottom: .55rem; }
.sg-inline.s-Open, .sg-inline.s-Under-Review { border-left-color: #ffc107; }
.sg-inline.s-Accepted { border-left-color: #198754; }
.sg-inline.s-Declined { border-left-color: #dc3545; }
.sg-inline-text { white-space: pre-wrap; overflow-wrap: anywhere; font-weight: 500; }
.sg-inline-reply { margin-top: .2rem; color: #495057; white-space: pre-wrap; }

/* ---- BOQ tab ---- */
.boq-line { border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 8px; padding: .65rem .8rem; margin-bottom: .6rem; background: #fff; }
.boq-line.st-Confirmed { border-left: 4px solid #198754; }
.boq-line.st-Draft { border-left: 4px solid #ffc107; }
.boq-line.st-In-RFQ { border-left: 4px solid #0dcaf0; background: #f8fcfd; }
.boq-inputs { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .55rem; padding-left: 1.5rem; align-items: flex-end; }
.boq-in label { display: block; font-size: .7rem; color: #6c757d; margin-bottom: 2px; }
.boq-bar { position: sticky; bottom: 0; background: #fff; padding: .6rem 0; border-top: 1px solid #dee2e6; }
.boq-setup { border: 1px solid #dee2e6; border-radius: 8px; padding: .6rem .8rem; background: #fafafa; }
.boq-setup summary { cursor: pointer; }
/* ---- Drawing with suggestions ---- */
.an-wrap { max-width: 2200px; margin: 0 auto; }
.an-canvas { position: relative; line-height: 0; border: 1px solid #dee2e6; }
.an-canvas canvas { width: 100%; height: auto; display: block; }
.an-cards { position: absolute; inset: 0; line-height: 1.25; }
.an-card { position: absolute; max-width: 26%; font-size: .72rem; border: 1px solid #adb5bd; background: rgba(255,255,255,.95); border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.an-card:hover { z-index: 5; }
.an-no { position: absolute; top: -9px; left: -9px; width: 18px; height: 18px; border-radius: 50%; background: #d63384; color: #fff; font: 700 10px/18px sans-serif; text-align: center; }
.an-actual { padding: 3px 6px; color: #333; }
.an-sg { padding: 3px 6px; border-top: 1px solid #adb5bd; white-space: pre-wrap; overflow-wrap: anywhere; }
.an-reply { color: #555; }
@media print {
  body.printing-annot > *:not(.modal) { display: none !important; }
  body.printing-annot .modal:not(#mdlMatAnnot) { display: none !important; }
  body.printing-annot #mdlMatAnnot { position: static !important; display: block !important; overflow: visible !important; }
  body.printing-annot #mdlMatAnnot .modal-dialog { max-width: none !important; margin: 0 !important; height: auto !important; }
  body.printing-annot .modal-backdrop, body.printing-annot .no-print { display: none !important; }
  body.printing-annot #mdlMatAnnot .modal-content { border: 0 !important; height: auto !important; }
  .an-card { box-shadow: none; }
}

.an-title { font-size: 1.05rem; margin-bottom: .4rem; }
.an-legend { font-size: .8rem; color: #555; margin-top: .4rem; }
.an-legend span { padding: 0 .35rem; border: 1px solid #adb5bd; border-radius: 3px; }
@media print { .an-card, .an-sg, .an-legend span { -webkit-print-color-adjust: exact; print-color-adjust: exact; } body.printing-annot .an-canvas canvas { image-rendering: auto; } }

/* ---- Render prompt tab + renderings gallery ---- */
.pm-thumb { width: 130px; text-decoration: none; color: inherit; font-size: .75rem; display: block; }
.pm-thumb img { width: 130px; height: 90px; object-fit: cover; border-radius: 6px; border: 1px solid #dee2e6; display: block; }
.pm-thumb span { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.rd-card { border: 1px solid #dee2e6; border-radius: 10px; overflow: hidden; background: #fff; cursor: pointer; }
.rd-card img, .rd-card .rd-pdf { width: 100%; height: 170px; object-fit: cover; display: block; background: #f1f3f5; }
.rd-card .rd-pdf { display: flex; align-items: center; justify-content: center; font-size: 3rem; color: #6c757d; }
.rd-card .rd-body { padding: .6rem .8rem; }