/* Task Instruction Documents - scripts/directives/templateDocuments.js
   .tdoc-card / .tdoc-row ... : <template-documents-editor> on the template editors
   .tdoc-view / .tdoc-btn ... : <task-instruction-documents> on MyTask / PayrollTask / InventoryTask */

/* ---- shared ---- */
.tdoc-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-bottom: 1px solid #f1f2f5; }
.tdoc-row:last-child { border-bottom: none; }
.tdoc-icon { font-size: 26px; width: 28px; text-align: center; flex: 0 0 auto; }
.tdoc-pdf { color: #dc2626; } .tdoc-word { color: #2563eb; } .tdoc-excel { color: #16a34a; } .tdoc-ppt { color: #ea580c; } .tdoc-other { color: #6b7280; }
.tdoc-main { flex: 1 1 auto; min-width: 0; }
.tdoc-title { font-weight: 600; color: #1f2430; font-size: 14.5px; }
.tdoc-meta { font-size: 12px; color: #8a909b; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdoc-desc { font-size: 13px; color: #4b5563; margin-top: 3px; }
.tdoc-hint { font-size: 12px; color: #98a0ac; margin-top: 5px; }

/* ---- editor card ---- */
.tdoc-card { font-family: 'Poppins', sans-serif; background: #fff; border: 1px solid #e7e9ee; border-radius: 12px; box-shadow: 0 1px 3px rgba(16,24,40,.04); padding: 22px 24px; margin-bottom: 18px; }
.tdoc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.tdoc-head .tdoc-hint { margin-top: 0; }
.tdoc-section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #8a909b; margin-bottom: 4px; }
.tdoc-head-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.tdoc-count { font-size: 12px; font-weight: 600; color: #6b7280; background: #eef0f3; border-radius: 20px; padding: 2px 10px; }
.tdoc-add { background: #2563eb; border: none; color: #fff; border-radius: 8px; padding: 7px 14px; font-weight: 500; }
.tdoc-add:hover, .tdoc-add:focus { background: #1d4ed8; color: #fff; }
.tdoc-add[disabled] { background: #b9c6e8; }
.tdoc-panel { border: 1px solid #e7e9ee; border-radius: 10px; overflow: hidden; }
.tdoc-panel .tdoc-row:hover { background: #f8fafc; }
.tdoc-empty { padding: 18px 14px; color: #8a909b; font-size: 13.5px; }
.tdoc-empty i { margin-right: 6px; }
.tdoc-order { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.tdoc-arrow { cursor: pointer; color: #9aa1ac; font-size: 12px; }
.tdoc-arrow:hover { color: #2563eb; }
.tdoc-arrow-off { visibility: hidden; }
.tdoc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tdoc-chip { font-size: 11.5px; font-weight: 500; color: #1e40af; background: #eef4ff; border: 1px solid #dbe6fe; border-radius: 20px; padding: 2px 9px; }
.tdoc-chip-all { color: #6b7280; background: #f3f4f6; border-color: #e5e7eb; }
.tdoc-chip-pick { color: #4b5563; background: #fff; border-color: #dde1e7; cursor: pointer; user-select: none; }
.tdoc-chip-pick:hover { border-color: #2563eb; color: #2563eb; }
.tdoc-chip-on, .tdoc-chip-on:hover { color: #fff; background: #2563eb; border-color: #2563eb; }
.tdoc-chip i { font-size: 10px; margin-right: 3px; }
.tdoc-row-actions { display: flex; gap: 4px; flex: 0 0 auto; }
.tdoc-icon-btn { cursor: pointer; font-size: 14px; padding: 4px 5px; border-radius: 6px; display: inline-block; color: #2563eb; }
.tdoc-icon-btn:hover, .tdoc-icon-btn:focus { background: #eef4ff; color: #2563eb; text-decoration: none; }
.tdoc-icon-del { color: #b91c1c; }
.tdoc-icon-del:hover { background: #fdecec; color: #b91c1c; }
.tdoc-modal .modal-content { border-radius: 12px; }
.tdoc-modal .modal-header { border-bottom: 1px solid #eceef2; }
.tdoc-modal .modal-title { font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 600; }
.tdoc-modal .modal-footer { border-top: 1px solid #eceef2; }
.tdoc-modal label { font-size: 12.5px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 5px; display: block; }
.tdoc-modal .tdoc-optional { text-transform: none; letter-spacing: 0; font-weight: 400; color: #98a0ac; }
.tdoc-modal .form-control { border-radius: 8px; }
.tdoc-modal .btn-primary { background: #2563eb; border: none; }
.tdoc-modal .btn-primary:hover { background: #1d4ed8; }

/* ---- task page card ---- */
.tdoc-view { font-family: 'Poppins', sans-serif; background: #fff; border: 1px solid #e8eaed; border-radius: 16px; box-shadow: 0 1px 2px rgba(16,24,40,0.05); padding: 20px 24px; margin-bottom: 24px; text-align: left; }
.tdoc-view .tdoc-row { padding: 10px 2px; border-bottom-color: #f1f3f6; }
.tdoc-view-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tdoc-view-icon { color: #2563eb; font-size: 16px; }
.tdoc-view-title { font-size: 16px; font-weight: 700; color: #2d3748; }
.tdoc-badge { background: #2563eb; color: #fff; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; }
.tdoc-featured { background: #f5f8ff; border: 1px solid #d6e2fd; border-radius: 12px; padding: 12px 14px 4px; margin-bottom: 10px; }
.tdoc-featured-label { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #1d4ed8; margin-bottom: 4px; }
.tdoc-featured-label .fa-star { color: #f59e0b; margin-right: 3px; }
.tdoc-view .tdoc-row-featured { border-bottom-color: #e3ebfd; }
.tdoc-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.tdoc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; font-size: 12.5px; font-weight: 600; color: #2563eb; background: #fff; border: 1px solid #c7d7fb; border-radius: 20px; text-decoration: none; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.tdoc-btn:hover, .tdoc-btn:focus { background: #2563eb; border-color: #2563eb; color: #fff; text-decoration: none; }
.tdoc-btn-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.tdoc-btn-primary:hover, .tdoc-btn-primary:focus { background: #1d4ed8; border-color: #1d4ed8; }
.tdoc-toggle { background: none; border: none; padding: 8px 2px; font-size: 13px; font-weight: 600; color: #4b5563; cursor: pointer; }
.tdoc-toggle:hover { color: #2563eb; }
.tdoc-toggle i { width: 14px; font-size: 11px; }
.tdoc-view-hint { font-size: 12.5px; color: #6b7280; padding: 4px 2px 2px; }

@media (max-width: 600px) {
    .tdoc-card, .tdoc-view { padding: 16px; }
    .tdoc-head { flex-direction: column; }
    .tdoc-row { flex-wrap: wrap; }
    .tdoc-actions, .tdoc-row-actions { width: 100%; padding-left: 42px; }
}