/* =========================================================
   Card Designer — styles
   Scoped under #tab-card-designer to avoid bleeding into
   other parts of door.html.
   ========================================================= */

#tab-card-designer .cd-wrap{
    display:grid;
    grid-template-columns: 220px 1fr 280px;
    grid-template-rows: minmax(0, 1fr);
    gap:14px;
    align-items:stretch;
    width:100%;
    height:100%;
    min-height:0;
    flex:1 1 auto;
}

#tab-card-designer .cd-panel{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:12px;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
    overflow-y:auto;
    overflow-x:hidden;
    min-height:0;
    max-height:100%;
}

#tab-card-designer .cd-panel h4{
    margin:0 0 .6rem;
    font-size:.78rem;
    font-weight:700;
    color:#374151;
    text-transform:uppercase;
    letter-spacing:.04em;
    border-bottom:1px solid #f1f5f9;
    padding-bottom:.4rem;
}

#tab-card-designer .cd-tools{ display:flex; flex-direction:column; gap:6px; }
#tab-card-designer .cd-tool{
    display:flex; align-items:center; gap:8px;
    padding:8px 10px;
    background:#f9fafb;
    border:1px solid #e5e7eb;
    border-radius:8px;
    font-size:.8rem;
    color:#1f2937;
    cursor:pointer;
    transition:all .15s;
    text-align:left;
}
#tab-card-designer .cd-tool:hover{ background:#eef2ff; border-color:#c7d2fe; color:#3730a3; }
#tab-card-designer .cd-tool i{ width:14px; text-align:center; color:#6366f1; }

#tab-card-designer .cd-canvas-wrap{
    display:flex; flex-direction:column; align-items:center; gap:10px;
    min-width:0;
    min-height:0;
    overflow:hidden;
    flex:1 1 auto;
}

#tab-card-designer .cd-toolbar{
    display:flex; flex-wrap:wrap; gap:6px; align-items:center;
    width:100%;
    padding:8px 10px;
    background:#f9fafb;
    border:1px solid #e5e7eb;
    border-radius:8px;
}
#tab-card-designer .cd-toolbar .cd-tb-group{ display:flex; gap:6px; align-items:center; padding-right:8px; border-right:1px solid #e5e7eb; }
#tab-card-designer .cd-toolbar .cd-tb-group:last-child{ border-right:none; }
#tab-card-designer .cd-toolbar label{ font-size:.72rem; color:#6b7280; }
#tab-card-designer .cd-toolbar select,
#tab-card-designer .cd-toolbar input[type="text"],
#tab-card-designer .cd-toolbar input[type="number"]{
    font-size:.78rem; padding:4px 6px; border:1px solid #d1d5db; border-radius:6px;
}
#tab-card-designer .cd-tb-btn{
    display:inline-flex; align-items:center; gap:5px;
    font-size:.75rem; padding:5px 9px;
    background:#fff; border:1px solid #d1d5db; border-radius:6px; cursor:pointer; color:#1f2937;
}
#tab-card-designer .cd-tb-btn:hover{ background:#f3f4f6; }
#tab-card-designer .cd-tb-btn.primary{ background:#6366f1; border-color:#6366f1; color:#fff; }
#tab-card-designer .cd-tb-btn.primary:hover{ background:#4f46e5; }
#tab-card-designer .cd-tb-btn.danger{ background:#fff; border-color:#fecaca; color:#b91c1c; }
#tab-card-designer .cd-tb-btn.danger:hover{ background:#fee2e2; }

#tab-card-designer .cd-card{
    position:relative;
    background:#ffffff;
    border:1px solid #d1d5db;
    border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,.12);
    overflow:hidden;
    /* CR80 default at ~3.78 px/mm => 323.6 x 204.1 px */
    width:324px;
    height:204px;
    background-size:cover;
    background-position:center;
    user-select:none;
    transform-origin: top left;
    transform: scale(var(--cd-scale, 2));
}
#tab-card-designer .cd-card.portrait{ width:204px; height:324px; }

/* Reserve room for the scaled card — JS overrides width/height inline */
#tab-card-designer #cd-card-host,
#tab-card-designer #cd-issue-card-host{
    --cd-scale: 1;
    position:relative;
    flex: 0 0 auto;
    margin: 4px 0 0;
}
#tab-card-designer #cd-card-host.portrait,
#tab-card-designer #cd-issue-card-host.portrait{}

#tab-card-designer .cd-side-tag{
    position:absolute; top:6px; right:8px;
    font-size:.6rem; font-weight:700; color:#9ca3af; letter-spacing:.05em;
    pointer-events:none;
}

#tab-card-designer .cd-elem{
    position:absolute;
    box-sizing:border-box;
    border:1px dashed transparent;
    cursor:move;
    min-width:18px; min-height:18px;
    line-height:1.2;
    padding:0;
}
#tab-card-designer .cd-elem.text{
    color:#111827; font-family:Inter, Arial, sans-serif; font-size:14px; font-weight:500;
    white-space:pre-wrap; word-break:break-word;
}
#tab-card-designer .cd-elem.image img,
#tab-card-designer .cd-elem.logo img,
#tab-card-designer .cd-elem.photo img{
    width:100%; height:100%; object-fit:cover; display:block; pointer-events:none;
}
#tab-card-designer .cd-elem.photo{
    background:repeating-linear-gradient(45deg,#f3f4f6,#f3f4f6 6px,#e5e7eb 6px,#e5e7eb 12px);
    border:1px solid #d1d5db;
    color:#6b7280; font-size:.7rem; display:flex; align-items:center; justify-content:center; text-align:center;
}
#tab-card-designer .cd-elem.qr,
#tab-card-designer .cd-elem.barcode{
    background:#fff; display:flex; align-items:center; justify-content:center; color:#6b7280; font-size:.65rem;
    border:1px solid #d1d5db;
}
#tab-card-designer .cd-elem.shape{ background:#6366f1; }

#tab-card-designer .cd-elem:hover{ border-color:#a5b4fc; }
#tab-card-designer .cd-elem.selected{ border:1px solid #6366f1; outline:1px solid #c7d2fe; }
#tab-card-designer .cd-handle{
    position:absolute; right:-5px; bottom:-5px; width:10px; height:10px;
    background:#6366f1; border:1px solid #fff; border-radius:2px; cursor:nwse-resize;
    display:none;
}
#tab-card-designer .cd-elem.selected .cd-handle{ display:block; }

#tab-card-designer .cd-side-toggle{
    display:inline-flex; background:#f3f4f6; border-radius:8px; padding:3px;
}
#tab-card-designer .cd-side-toggle button{
    padding:5px 12px; font-size:.75rem; border:none; background:transparent; border-radius:6px; cursor:pointer; color:#374151;
}
#tab-card-designer .cd-side-toggle button.active{ background:#fff; color:#1f2937; box-shadow:0 1px 3px rgba(0,0,0,.1); font-weight:600; }

#tab-card-designer .cd-prop-row{ display:flex; flex-direction:column; gap:3px; margin-bottom:8px; }
#tab-card-designer .cd-prop-row label{ font-size:.7rem; color:#6b7280; font-weight:600; }
#tab-card-designer .cd-prop-row input,
#tab-card-designer .cd-prop-row select,
#tab-card-designer .cd-prop-row textarea{
    font-size:.78rem; padding:5px 7px; border:1px solid #d1d5db; border-radius:6px; width:100%; box-sizing:border-box;
}
#tab-card-designer .cd-prop-row textarea{ resize:vertical; min-height:54px; font-family:inherit; }
#tab-card-designer .cd-prop-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }

#tab-card-designer .cd-empty{
    color:#9ca3af; font-size:.78rem; text-align:center; padding:1rem .5rem;
}

#tab-card-designer .cd-templates{
    display:flex; flex-direction:column; gap:4px; max-height:160px; overflow-y:auto;
}
#tab-card-designer .cd-tpl-item{
    display:flex; justify-content:space-between; align-items:center;
    padding:6px 8px; background:#f9fafb; border:1px solid #e5e7eb; border-radius:6px; font-size:.75rem;
}
#tab-card-designer .cd-tpl-item button{ background:none; border:none; cursor:pointer; color:#6b7280; padding:2px 5px; }
#tab-card-designer .cd-tpl-item button:hover{ color:#111827; }

#tab-card-designer .cd-hint{
    font-size:.7rem; color:#9ca3af; margin-top:6px; text-align:center;
}

@media (max-width: 1100px){
    #tab-card-designer .cd-wrap{ grid-template-columns: 1fr; }
}

/* Print: render only the active card at exact CR80 size */
@media print{
    body * { visibility:hidden !important; }
    #cd-print-root, #cd-print-root *{ visibility:visible !important; }
    #cd-print-root{
        position:fixed; left:0; top:0; width:100%; height:100%;
        display:flex; align-items:center; justify-content:center;
        background:#fff;
    }
    #cd-print-root .cd-card{
        box-shadow:none !important; border:none !important; border-radius:0 !important;
        width:85.6mm !important; height:54mm !important;
        transform:none !important;
    }
    #cd-print-root .cd-card.portrait{ width:54mm !important; height:85.6mm !important; }
    #cd-print-root .cd-elem{ border-color:transparent !important; outline:none !important; }
    #cd-print-root .cd-handle{ display:none !important; }
    #cd-print-root .cd-side-tag{ display:none !important; }
}