/* ============ html-demo custom styles (Vuexy-based demo pages) ============ */

/* --- page header / intro --- */
.demo-page-head h4{font-weight:600}
.demo-page-head .breadcrumb{margin:0}
.demo-page-head .badge{font-size:12px;font-weight:600}

/* --- identity card (Vuexy look) --- */
.idcard-wrap{max-width:520px}
.idcard{border-radius:.5rem;overflow:hidden;box-shadow:var(--bs-box-shadow)}
.idcard .head{background:linear-gradient(90deg,var(--bs-primary-dark,var(--bs-primary)),var(--bs-primary));color:#fff;padding:14px 18px;display:flex;align-items:center;gap:12px}
.idcard .head .logo{width:38px;height:38px;border-radius:.375rem;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:20px}
.idcard .head .ttl{font-size:15px;font-weight:700;letter-spacing:.3px}
.idcard .head .ttl small{display:block;font-size:11px;opacity:.82;font-weight:400}
.idcard .body{padding:18px;display:flex;gap:16px;background:var(--bs-card-bg)}
.idcard .photo{width:92px;height:112px;border-radius:.375rem;border:1px dashed var(--bs-border-color);background:rgba(var(--bs-primary-rgb),.08);display:grid;place-items:center;color:var(--bs-primary);font-size:30px;overflow:hidden;flex:none}
.idcard .photo img{width:100%;height:100%;object-fit:cover}
.idcard .rows{flex:1;display:flex;flex-direction:column;gap:9px}
.idcard .pill{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding-bottom:8px;border-bottom:1px dashed var(--bs-border-color)}
.idcard .pill b{font-weight:600;color:var(--bs-heading-color)}
.idcard .pill span{color:var(--bs-secondary-color);font-size:12.5px;text-align:end}
.idcard .foot{display:flex;justify-content:space-between;align-items:center;padding:8px 18px;background:rgba(var(--bs-business-rgb),.04);border-top:1px solid var(--bs-border-color);font-size:11.5px;color:var(--bs-secondary-color)}
.idcard .foot .qr{font-size:22px;line-height:1;color:var(--bs-primary)}

/* --- photo drop --- */
.photo-drop{display:flex;align-items:center;gap:14px}
.photo-preview{width:70px;height:84px;border-radius:.375rem;border:1px dashed var(--bs-border-color);background:var(--bs-body-bg);display:grid;place-items:center;color:var(--bs-primary);font-size:26px;overflow:hidden;flex:none}
.photo-preview img{width:100%;height:100%;object-fit:cover}

/* --- demo filters bar --- */
.demo-filters{border-bottom:1px solid var(--bs-border-color);background:var(--bs-card-bg)}
.demo-filters label{font-size:12px;font-weight:600;color:var(--bs-secondary-color);margin-bottom:2px}
.demo-filters .form-control,.demo-filters .form-select{min-width:150px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--bs-border-color);background:var(--bs-body-bg);color:var(--bs-secondary-color);border-radius:999px;padding:4px 11px;font-size:12px;cursor:pointer;user-select:none}
.chip:hover{border-color:var(--bs-primary);color:var(--bs-primary)}
.chip.active{background:var(--bs-primary);border-color:var(--bs-primary);color:#fff}

/* --- completion header inside add/edit cards --- */
.comp-header .progress{height:10px}
.comp-header .pct-lg{font-size:26px;font-weight:700;color:var(--bs-primary)}

/* --- sticky profile status sidebar --- */
.sticky-side{position:sticky;top:1rem}

/* --- mini identity card (live preview in profile status) --- */
.mini-idc-wrap{margin-bottom:1rem}
.mini-idc{border-radius:.5rem;overflow:hidden;box-shadow:var(--bs-box-shadow);font-size:12px}
.mini-idc-head{background:linear-gradient(90deg,var(--bs-primary-dark,var(--bs-primary)),var(--bs-primary));color:#fff;padding:10px 12px;display:flex;align-items:center;gap:10px}
.mini-idc-logo{width:30px;height:30px;border-radius:.375rem;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:15px;flex:none}
.mini-idc-ttl{font-size:12px;font-weight:700;letter-spacing:.3px;line-height:1.2}
.mini-idc-ttl small{display:block;font-size:9.5px;opacity:.82;font-weight:400}
.mini-idc-qr{margin-left:auto;font-size:18px;line-height:1;opacity:.9}
.mini-idc-body{display:flex;gap:12px;padding:12px;background:var(--bs-card-bg)}
.mini-idc-photo{width:64px;height:78px;border-radius:.375rem;border:1px dashed var(--bs-border-color);background:rgba(var(--bs-primary-rgb),.08);display:grid;place-items:center;color:var(--bs-primary);font-size:22px;overflow:hidden;flex:none}
.mini-idc-photo img{width:100%;height:100%;object-fit:cover}
.mini-idc-rows{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.mini-idc-pill{display:flex;justify-content:space-between;gap:8px;font-size:11px;padding-bottom:5px;border-bottom:1px dashed var(--bs-border-color)}
.mini-idc-pill:last-child{border-bottom:none;padding-bottom:0}
.mini-idc-pill b{font-weight:600;color:var(--bs-heading-color)}
.mini-idc-pill span{color:var(--bs-secondary-color);text-align:end;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.mini-idc-foot{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(var(--bs-business-rgb),.04);border-top:1px solid var(--bs-border-color);font-size:10.5px;color:var(--bs-secondary-color)}
.mini-idc-dot{width:8px;height:8px;border-radius:50%;background:var(--bs-secondary);margin-left:auto;flex:none}
.mini-idc.is-ready .mini-idc-dot{background:var(--bs-warning);animation:miniPulse 1s ease-in-out infinite}
.mini-idc.is-issued .mini-idc-dot{background:var(--bs-success)}
.mini-idc.is-issued #pCardState{color:var(--bs-success)}
@keyframes miniPulse{0%,100%{opacity:1}50%{opacity:.35}}

/* --- mini identity card: design variants (set by js/carddesign.js) --- */
.mini-idc{--cd-accent:var(--bs-primary);--cd-accent-rgb:var(--bs-primary-rgb,105,108,255);--cd-accent-dk:var(--bs-primary-dark,var(--bs-primary))}

.mini-idc[data-cd-header="gradient"] .mini-idc-head{background:linear-gradient(90deg,var(--cd-accent-dk),var(--cd-accent))}
.mini-idc[data-cd-header="solid"] .mini-idc-head{background:var(--cd-accent)}
.mini-idc[data-cd-header="flat"] .mini-idc-head{background:var(--bs-body-bg);color:var(--bs-heading-color);border-bottom:2px solid var(--cd-accent)}
.mini-idc[data-cd-header="flat"] .mini-idc-logo{background:rgba(var(--cd-accent-rgb),.14);color:var(--cd-accent)}

.mini-idc[data-cd-radius="sharp"]{border-radius:0}
.mini-idc[data-cd-radius="sharp"] .mini-idc-photo{border-radius:0}
.mini-idc[data-cd-radius="pill"]{border-radius:.75rem}
.mini-idc[data-cd-radius="pill"] .mini-idc-photo{border-radius:.25rem}

.mini-idc[data-cd-density="compact"] .mini-idc-head{padding:7px 10px}
.mini-idc[data-cd-density="compact"] .mini-idc-body{padding:9px 10px;gap:10px}
.mini-idc[data-cd-density="compact"] .mini-idc-photo{width:52px;height:64px}
.mini-idc[data-cd-density="compact"] .mini-idc-rows{gap:4px}
.mini-idc[data-cd-density="compact"] .mini-idc-foot{padding:6px 10px}
.mini-idc[data-cd-density="roomy"] .mini-idc-head{padding:13px 15px}
.mini-idc[data-cd-density="roomy"] .mini-idc-body{padding:15px;gap:14px}
.mini-idc[data-cd-density="roomy"] .mini-idc-photo{width:74px;height:90px}
.mini-idc[data-cd-density="roomy"] .mini-idc-rows{gap:8px}
.mini-idc[data-cd-density="roomy"] .mini-idc-foot{padding:10px 15px}

.mini-idc[data-cd-layout="vertical"] .mini-idc-body{flex-direction:column;align-items:stretch}
.mini-idc[data-cd-layout="vertical"] .mini-idc-photo{width:100%;height:120px;border-radius:.375rem}
.mini-idc[data-cd-layout="vertical"][data-cd-photo="end"] .mini-idc-photo{order:2}
.mini-idc[data-cd-layout="vertical"] .mini-idc-pill span{max-width:65%}
.mini-idc[data-cd-layout="horizontal"][data-cd-photo="end"] .mini-idc-photo{order:2}

.mini-idc-photo{background:rgba(var(--cd-accent-rgb),.08);color:var(--cd-accent)}
.mini-idc-foot{background:rgba(var(--cd-accent-rgb),.05)}
.mini-idc .mini-idc-qr[hidden],.mini-idc .mini-idc-photo[hidden],
.mini-idc .mini-idc-foot[hidden],.mini-idc .mini-idc-org[hidden],
.mini-idc .mini-idc-pill[hidden]{display:none}

/* --- profile checklist --- */
.checklist{list-style:none;margin:0;padding:0}
.checklist li{padding:3px 0;font-size:13px;color:var(--bs-secondary-color)}
.checklist li .ok{color:var(--bs-success);font-weight:600}
.checklist li .miss{color:var(--bs-danger);font-weight:600}

/* --- demo toast (fixed) --- */
.demo-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,16px);z-index:1080;max-width:92vw;opacity:0;pointer-events:none;transition:.25s}
.demo-toast.show{opacity:1;transform:translate(-50%,0)}
.demo-toast .toast{opacity:1}

/* --- avatar initials --- */
.avatar-initials{font-weight:600;font-size:13px}

/* --- table tweaks --- */
.table .emp-name{font-weight:600;color:var(--bs-heading-color);white-space:nowrap}
.table .emp-sub{font-size:12px;color:var(--bs-secondary-color);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.table .mono{font-family:SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;color:var(--bs-secondary-color)}

/* --- subtle customizer toggle (demo) --- */
#template-customizer{opacity:.1}
#template-customizer:hover{opacity:1;transition:.2s}

/* --- collapsible scrollable fields checklist --- */
.skills-collapse-head{color:var(--bs-secondary-color);cursor:pointer}
.skills-collapse-head:hover{color:var(--bs-heading-color)}
.skills-collapse-head i{transition:transform .2s}
.skills-collapse-head.collapsed i{transform:rotate(-90deg)}
.skills-scroll{max-height:210px;overflow-y:auto;padding-right:4px}

/* --- tab content inside profile cards: flatten shadow --- */
.card .tab-content{box-shadow:0 0rem 0rem 0 rgba(47,43,61,.14)}

/* --- booklet: read-only field rows --- */
.bview-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 50px;padding:0px 35px}
.bview-subhead{padding-left:35px}
.bview-subhead + .bview-grid{padding-left:70px}
.bview-form{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 50px;padding:0px 35px}
.bview-subhead + .bview-form{padding-left:70px}
.bview-row{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px dashed var(--bs-border-color);font-size:13px;margin-top:12px}
.bview-row:last-child{border-bottom:none}
.bview-label{color:var(--bs-secondary-color);font-size:12.5px;white-space:nowrap;flex:none}
.bview-value{color:var(--bs-heading-color);font-weight:600;text-align:end;overflow-wrap:anywhere}
.bview-empty{text-align:center;padding:28px 12px;color:var(--bs-secondary-color)}
.bview-empty i{font-size:34px;color:var(--bs-primary);opacity:.6}
.bview-photo{max-width:220px}
.bview-photo img{width:100%;border-radius:.5rem;box-shadow:var(--bs-box-shadow)}

/* --- booklet: navigation column --- */
.booklet-nav{display:flex;flex-direction:column;gap:4px}
.booklet-nav-link{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:.375rem;color:var(--bs-body-color);text-decoration:none;font-size:13.5px;font-weight:500;transition:.15s;position:relative}
.booklet-nav-link i{color:var(--bs-secondary-color);font-size:18px;transition:.15s}
.booklet-nav-link:hover{background:rgba(var(--bs-primary-rgb),.08);color:var(--bs-primary)}
.booklet-nav-link:hover i{color:var(--bs-primary)}
.booklet-nav-link.active{background:var(--bs-primary);color:#fff}
.booklet-nav-link.active i{color:#fff}
.booklet-nav-badge{margin-left:auto;font-size:10px;font-weight:600;color:var(--bs-secondary-color);border:1px solid var(--bs-border-color);border-radius:999px;padding:1px 7px;text-transform:uppercase}
.booklet-nav-link.active .booklet-nav-badge{color:#fff;border-color:rgba(255,255,255,.5)}

/* --- tashkeel positions --- */
.tsk-position-list{padding-left:70px}
.bview-form .tsk-position-list{padding-left:0}
.tsk-position{border:1px solid var(--bs-border-color);border-radius:.5rem;padding:14px 16px;margin-bottom:12px;background:var(--bs-card-bg);transition:box-shadow .15s,border-color .15s}
.tsk-position:hover{border-color:var(--bs-primary);box-shadow:0 .25rem 1rem rgba(47,43,61,.06)}
.tsk-position.assigned{border-color:var(--bs-success);background:rgba(var(--bs-success-rgb),.04)}
.tsk-position-num{width:38px;height:38px;border-radius:.375rem;background:rgba(var(--bs-primary-rgb),.1);color:var(--bs-primary);display:grid;place-items:center;font-weight:700;font-size:16px;flex:none}
.tsk-position.assigned .tsk-position-num{background:rgba(var(--bs-success-rgb),.15);color:var(--bs-success)}
.tsk-position-photo-wrap{width:38px;height:38px;border-radius:.375rem;overflow:hidden;flex:none;background:rgba(var(--bs-success-rgb),.15);display:grid;place-items:center}
.tsk-position-photo-wrap img{width:100%;height:100%;object-fit:cover}
.tsk-position-photo-init{width:100%;height:100%;display:grid;place-items:center;font-weight:700;font-size:15px;color:var(--bs-success)}
.tsk-history-item{border:1px solid var(--bs-border-color);border-left:3px solid var(--bs-primary);border-radius:.5rem;padding:14px 16px;margin-bottom:12px;background:var(--bs-card-bg)}
.tsk-history-list{max-height:636px;overflow-y:auto;padding-right:6px}
.nav-pills .nav-link.status-active:not(.active){background:rgba(40,199,111,.12);color:var(--bs-success)}
.nav-pills .nav-link.status-active:not(.active) .ti{color:var(--bs-success)}
.nav-pills .nav-link.status-active.active{background:var(--bs-success);border-color:var(--bs-success)}
.nav-pills .nav-link.status-active.active .ti{color:#fff}
.ap-doc-item{display:flex;align-items:center;gap:.75rem;border:1px solid var(--bs-border-color);border-radius:.5rem;padding:.55rem .75rem;margin-bottom:.5rem;background:var(--bs-card-bg)}
.booklet-doc-toolbar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding-top:.75rem}
.booklet-doc-toolbar .input-group{flex:1 1 190px;min-width:0}
.booklet-doc-table th{font-size:12px;font-weight:600;color:var(--bs-secondary-color);text-transform:uppercase;letter-spacing:.2px}
.booklet-doc-table td{vertical-align:middle}
.booklet-doc-name{font-size:13px;line-height:1.2;white-space:nowrap;color:var(--bs-heading-color)}
.booklet-doc-name:hover{color:var(--bs-primary)}
.booklet-doc-form{border:1px dashed var(--bs-border-color);border-radius:.5rem;padding:.85rem .85rem .9rem;margin-top:.5rem;background:rgba(var(--bs-primary-rgb),.03)}
.bview-form .ap-full{grid-column:1/-1;padding-top:35px}
.bview-form-full{grid-column:1/-1}
.bview-form-tri{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px 50px}
.bview-form-pair{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 50px}
.bview-form-tri-21{grid-template-columns:2fr 1fr}

/* Shared 12-track form grid, so 1/4, 1/3, 1/2 and full-width fields all line up */
.bview-form-g{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px 28px;align-items:start}
.bview-form-g > *{grid-column:span 4;min-width:0}
.bview-form-g > .g-quarter{grid-column:span 3}
.bview-form-g > .g-half{grid-column:span 6}
.bview-form-g > .g-full{grid-column:span 12}
.bview-form-g > .bview-ghead{grid-column:1/-1;display:flex;align-items:center;gap:12px}
.bview-form-g > .bview-ghead h6{white-space:nowrap}
.bview-form-g > .bview-ghead::after{content:"";flex:1;min-width:20px;height:1px;background:var(--bs-border-color);opacity:.75}
.bview-form-g .form-control,.bview-form-g .form-select,.bview-form-g .btn-group{min-width:0;width:100%}
.bview-form-g .btn-group .btn{flex:1 1 0}
.bview-form-g textarea{resize:vertical;min-height:78px}
.bview-form-g input[type="file"]{padding:4px 8px;font-size:12.5px;line-height:1.4;overflow:hidden}
.bview-form-g input[type="file"]::file-selector-button{padding:1px 10px;margin-right:8px;font-size:12px;border-right:1px solid var(--bs-border-color)}
.bview-form-g .form-label{margin-bottom:4px}
.bview-formactions{display:flex;flex-wrap:wrap;gap:.5rem;padding:16px 35px 0;margin-top:18px;border-top:1px dashed var(--bs-border-color)}
@media (max-width:1399.98px){
  .bview-form-g{grid-template-columns:repeat(6,minmax(0,1fr))}
  .bview-form-g > *{grid-column:span 2}
  .bview-form-g > .g-quarter,.bview-form-g > .g-half{grid-column:span 3}
  .bview-form-g > .g-full{grid-column:span 6}
}
@media (max-width:767.98px){
  .bview-form-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bview-form-g > *,.bview-form-g > .g-quarter,.bview-form-g > .g-half{grid-column:span 1}
  .bview-form-g > .g-full{grid-column:1/-1}
}
@media (max-width:575.98px){
  .bview-form-g{grid-template-columns:minmax(0,1fr)}
  .bview-form-g > *,.bview-form-g > .g-half{grid-column:1/-1}
}

/* --- card design module --- */
.card-design-toolbar .input-group{max-width:460px}
.card-design-list .card-design-item{border:1px solid var(--bs-border-color);transition:border-color .15s,box-shadow .15s}
.card-design-list .card-design-item:hover{border-color:rgba(var(--bs-primary-rgb),.45);box-shadow:0 .35rem 1rem rgba(47,43,61,.08)}
.card-design-item .mini-idc{max-width:340px}
.card-design-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--bs-secondary-color)}
.card-design-blank{border:1px dashed var(--bs-border-color);border-radius:.75rem;background:linear-gradient(135deg,rgba(var(--bs-primary-rgb),.04),rgba(var(--bs-success-rgb),.04));padding:44px 28px;text-align:center}
.card-design-fields-panel{display:flex;flex-direction:column;gap:14px}
.card-design-field-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.3rem;padding:.25rem;border:1px solid var(--bs-border-color);border-radius:.65rem;background:rgba(var(--bs-secondary-rgb),.06)}
.card-design-field-tabs .nav-link{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;min-width:0;padding:.35rem .15rem;border:1px solid transparent;border-radius:.45rem;color:var(--bs-secondary-color);font-size:.75rem;font-weight:600;line-height:1.2}
.card-design-field-tabs .nav-link i{font-size:1rem}
.card-design-field-tabs .nav-link:not(.active):hover{color:var(--bs-body-color);background:var(--bs-body-bg)}
.card-design-field-tabs .nav-link[data-type="field"].active{color:var(--bs-primary);background:rgba(var(--bs-primary-rgb),.12);border-color:rgba(var(--bs-primary-rgb),.25)}
.card-design-field-tabs .nav-link[data-type="label"].active{color:var(--bs-info);background:rgba(var(--bs-info-rgb),.12);border-color:rgba(var(--bs-info-rgb),.25)}
.card-design-field-tabs .nav-link[data-type="photo"].active{color:var(--bs-success);background:rgba(var(--bs-success-rgb),.12);border-color:rgba(var(--bs-success-rgb),.25)}
.card-design-field-tabs .nav-link[data-type="qrcode"].active{color:var(--bs-warning);background:rgba(var(--bs-warning-rgb),.12);border-color:rgba(var(--bs-warning-rgb),.25)}
.card-design-field-tabs .nav-link[data-type="barcode"].active{color:var(--bs-secondary);background:rgba(var(--bs-secondary-rgb),.12);border-color:rgba(var(--bs-secondary-rgb),.25)}
.card-design-field-tabs .nav-link:focus-visible{outline:2px solid var(--bs-primary);outline-offset:2px}
.card-design-field-tab-count{position:absolute;top:2px;right:3px;min-width:1rem;padding:.05rem .2rem;border-radius:999px;background:rgba(var(--bs-secondary-rgb),.12);font-size:.6rem;line-height:1.2;text-align:center}
.card-design-photo-thumb{width:32px;height:32px;flex:none;object-fit:contain;border-radius:.25rem;background:rgba(var(--bs-secondary-rgb),.08)}
.card-design-photo-form-preview{display:block;max-width:100%;max-height:120px;object-fit:contain;border:1px solid var(--bs-border-color);border-radius:.375rem;background:rgba(var(--bs-secondary-rgb),.06)}
.card-design-photo-form-preview[hidden]{display:none}
.card-design-code-form-preview{display:block;max-width:100%;max-height:140px;object-fit:contain;background:#fff;border:1px solid var(--bs-border-color);border-radius:.375rem}
.card-design-code-form-preview[hidden]{display:none}
.card-design-code-error{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%;padding:.35rem;border:1px dashed var(--bs-danger);background:var(--bs-body-bg);color:var(--bs-danger);font-size:.6875rem;line-height:1.3;text-align:center;white-space:normal;overflow-wrap:anywhere;overflow:hidden}
.card-design-fields-scroll{max-height:600px;overflow:auto;border:1px solid var(--bs-border-color);border-radius:.5rem}
.card-design-fields-scroll table{margin:0}
.card-design-fields-scroll tbody td{padding-top:0;padding-bottom:0}
.card-design-fields-scroll thead th{position:sticky;top:0;background:var(--bs-body-bg);z-index:1}
.card-design-empty-row td{padding:2.5rem 1rem;text-align:center;color:var(--bs-secondary-color)}
.card-design-fields-scroll tr[data-draggable="1"]{cursor:grab}
.card-design-fields-scroll tr[data-draggable="1"]:active{cursor:grabbing}

.card-design-preview-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}
.card-design-preview-toolbar #textLayerControls,.card-design-preview-toolbar #imageLayerControls{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}
.card-design-preview-toolbar #textLayerControls[hidden],.card-design-preview-toolbar #imageLayerControls[hidden],#positionControls[hidden]{display:none}
.card-design-preview-toolbar .form-select,.card-design-preview-toolbar .form-control{width:auto}
.card-design-preview-toolbar .form-control-color{width:42px;height:32px;min-height:32px;padding:3px}
.card-design-preview-toolbar #textFontFamily{min-width:170px}
.card-design-preview-toolbar #textFontSize{width:96px}
.card-design-preview-toolbar #textFontWeight{min-width:130px}
.card-design-preview-toolbar #imageWidth{width:96px}
.card-design-preview-toolbar #imageHeight{width:96px}
.card-design-preview-toolbar #textWidth{width:110px}
.card-design-position-controls{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}
.card-design-position-controls .form-control{width:85px}
.card-design-toast{position:fixed;bottom:1rem;inset-inline-end:1rem;z-index:1100;max-width:min(360px,calc(100vw - 2rem));box-shadow:var(--bs-box-shadow)}
.card-design-preview-shell{width:max-content;max-width:100%;margin-inline:auto;overflow:auto;border:1px dashed var(--bs-border-color);border-radius:.75rem;padding:12px;background:linear-gradient(135deg,rgba(var(--bs-primary-rgb),.03),rgba(var(--bs-warning-rgb),.04));transition:border-color .15s,background .15s}
.card-design-preview-shell.is-dragover{border-color:var(--bs-primary);background:rgba(var(--bs-primary-rgb),.08)}
.card-design-preview-shell.is-item-dragover{border-color:var(--bs-success);background:rgba(var(--bs-success-rgb),.09)}
.card-design-preview-shell.is-locked{border-style:solid}
.card-design-side-tabs{display:flex;flex-wrap:nowrap;gap:.25rem;margin-bottom:.75rem;padding:.25rem;background:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:.5rem}
.card-design-side-tabs[hidden]{display:none}
.card-design-side-tabs .nav-link{flex:1;padding:.4rem .75rem;font-size:.875rem;text-align:center}
.card-design-side-tabs .nav-link:focus-visible{outline:2px solid var(--bs-primary);outline-offset:2px}
.card-design-preview-stage{position:relative;width:86mm;height:54mm}
.card-design-preview{position:absolute;top:0;left:0;width:86mm;height:54mm;transform-origin:top left;border-radius:.6rem;overflow:hidden;background:#f7f7fa;border:1px solid var(--bs-border-color);box-shadow:0 .25rem .75rem rgba(47,43,61,.12);user-select:none}
#previewBackgroundItems{position:absolute;inset:0;z-index:0;pointer-events:none}
#previewBackgroundItems .card-design-preview-item{pointer-events:auto}
.card-design-preview-bg{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;background-position:50% 50%;cursor:grab;z-index:1;transition:filter .2s,opacity .2s}
.card-design-preview-bg.is-empty{background-image:radial-gradient(circle at 10px 10px,rgba(0,0,0,.06) 1px,transparent 0);background-size:18px 18px}
.card-design-preview-bg.is-locked{cursor:not-allowed;filter:saturate(.75)}
.card-design-preview-grid{position:absolute;inset:0;background-image:linear-gradient(to right,rgba(255,255,255,.15) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.15) 1px,transparent 1px);background-size:24px 24px;z-index:2;pointer-events:none}
.card-design-alignment-guide{position:absolute;z-index:6;pointer-events:none;background:#e53935;box-shadow:0 0 3px rgba(229,57,53,.55)}
.card-design-alignment-guide.is-vertical{top:0;bottom:0;width:1px;transform:translateX(-50%)}
.card-design-alignment-guide.is-horizontal{left:0;right:0;height:1px;transform:translateY(-50%)}

.card-design-layer{position:absolute;z-index:4;cursor:grab;touch-action:none;transition:box-shadow .15s,transform .15s}
.card-design-layer:hover{box-shadow:0 .3rem .9rem rgba(0,0,0,.14)}
.card-design-layer.is-locked{cursor:not-allowed;outline:1px dashed rgba(var(--bs-danger-rgb),.5)}

.card-design-preview-item {
    position: absolute;
    z-index: 4;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    max-width: 72%;
    padding: 0;
    background: transparent;
    color: #2f2b3d;
    font-size: .68rem;
    font-weight: 600;
    cursor: grab;
    touch-action: none;
    white-space: nowrap;
    overflow: visible;
}
.card-design-preview-item[data-type="label"]{font-weight:700}
.card-design-preview-item.is-locked{cursor:not-allowed;outline:1px dashed rgba(var(--bs-danger-rgb),.55)}
.card-design-preview-item.is-selected{outline:1px solid rgba(var(--bs-primary-rgb),.9)}
.card-design-preview-item-text{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.card-design-preview-item.is-image-field{width:80px;height:80px;min-height:0;max-width:none}
.card-design-preview-item-photo{width:100%;height:100%;object-fit:cover;display:block}
.card-design-preview-item.is-image-field .card-design-preview-item-del{top:2px;right:2px;transform:none}
.card-design-preview-item-del{position:absolute;top:50%;transform:translateY(-50%);right:2px;width:18px;height:18px;display:none;align-items:center;justify-content:center;border:0;border-radius:999px;background:rgba(0,0,0,.12);color:#fff;padding:0;cursor:pointer;opacity:.75}
.card-design-preview-item:not(.is-image-field) .card-design-preview-item-del{top:-18px;right:-18px;transform:none}
.card-design-preview-item.is-selected .card-design-preview-item-del{display:inline-flex}
.card-design-preview-item-del:hover{opacity:1;background:rgba(var(--bs-danger-rgb),.75)}
.card-design-preview-item[data-type="label"] .card-design-preview-item-del{background:rgba(0,0,0,.28)}
.card-design-preview-item.is-locked .card-design-preview-item-del{display:none}

.card-design-drag-ghost{position:fixed;top:-9999px;left:-9999px;max-width:240px;padding:.2rem .5rem;border-radius:.4rem;background:rgba(0,0,0,.75);color:#fff;font-size:.68rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}

.card-design-preview-hint{position:absolute;left:50%;bottom:.65rem;transform:translateX(-50%);z-index:5;font-size:.66rem;color:#fff;background:rgba(0,0,0,.62);padding:.24rem .5rem;border-radius:999px;pointer-events:none;max-width:95%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.card-design-layers-panel{height:400px;min-height:0;display:flex;flex-direction:column}
.card-design-panel-tabs{flex:none;flex-wrap:nowrap;gap:.25rem}
.card-design-panel-tabs .nav-link{flex:1;display:inline-flex;align-items:center;justify-content:center;padding:.45rem;font-size:1.1rem;line-height:1}
.card-design-panel-content{flex:1;min-height:0;overflow:hidden}
.card-design-panel-content>.tab-pane{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden}
.card-design-panel-content>.card-design-layers-pane.active{display:flex;flex-direction:column;overflow:hidden}
.card-design-settings-pane .form-label{margin-bottom:.25rem}
.card-design-settings-pane .form-control-color{width:100%;min-height:32px}
.card-design-background-actions{display:flex;flex-direction:column;gap:.5rem}
.card-design-background-actions .btn{display:flex;align-items:center;justify-content:flex-start;gap:.5rem;width:100%;text-align:start}
.card-design-item-locks{display:flex;flex-direction:column;gap:.4rem;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding-inline-end:2px}
.card-design-item-lock-row{display:flex;align-items:center;gap:.35rem;flex:none;padding:.2rem;border:1px solid var(--bs-border-color);border-radius:.5rem;background:var(--bs-body-bg)}
.card-design-item-lock-row.is-selected[data-type="field"]{border-color:rgba(var(--bs-primary-rgb),.55);background:rgba(var(--bs-primary-rgb),.05)}
.card-design-item-lock-row.is-selected[data-type="label"]{border-color:rgba(var(--bs-info-rgb),.55);background:rgba(var(--bs-info-rgb),.05)}
.card-design-item-lock-row.is-selected[data-type="photo"]{border-color:rgba(var(--bs-success-rgb),.55);background:rgba(var(--bs-success-rgb),.05)}
.card-design-item-lock-row.is-selected[data-type="qrcode"]{border-color:rgba(var(--bs-warning-rgb),.55);background:rgba(var(--bs-warning-rgb),.05)}
.card-design-item-lock-row.is-selected[data-type="barcode"]{border-color:rgba(var(--bs-secondary-rgb),.55);background:rgba(var(--bs-secondary-rgb),.05)}
.card-design-item-lock-row [data-select-placed]{flex:1;min-width:0;text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-design-background-layer-name{flex:1;min-width:0;display:flex;align-items:center;height:30px;padding:0 .5rem;border-radius:.375rem;font-size:.8125rem;font-weight:500}
.card-design-item-lock-row .card-design-item-lock-toggle{flex:none;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;padding:0}

.card-design-catalog-preview{position:relative;width:100%;max-width:340px;overflow:hidden;border:1px solid var(--bs-border-color);border-radius:.5rem;box-shadow:var(--bs-box-shadow)}
.card-design-catalog-bg{position:absolute;inset:0;z-index:1;background-repeat:no-repeat}
.card-design-catalog-layer{position:absolute;z-index:0;transform:translate(-50%,-50%);overflow:hidden}
.card-design-catalog-layer.is-front{z-index:2}
.card-design-catalog-layer img{display:block;width:100%;height:100%}
.card-design-catalog-text{z-index:2;max-width:72%;padding:0;line-height:1.35;overflow-wrap:anywhere}

@media (max-width:767.98px){
  .card-design-fields-scroll{max-height:320px}
  .card-design-preview-shell{padding:6px}
  .card-design-preview-toolbar #textFontFamily{min-width:145px}
}