:root { --wf-bg: #f8fafc; --wf-card: #ffffff; --wf-border: #e2e8f0; --wf-primary: #2563eb; --wf-primary-light: #eff6ff; --wf-text-main: #0f172a; --wf-text-muted: #64748b; --wf-success: #10b981; --wf-success-bg: #d1fae5; --wf-danger: #ef4444; --wf-danger-bg: #fee2e2; --wf-warning: #f59e0b; --wf-warning-bg: #fef3c7; }
.wf-dashboard { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", Roboto, sans-serif; color: var(--wf-text-main); max-width: 1200px; margin: 0 auto; padding: 20px 0; }
.wf-page-title { font-size: 24px; font-weight: 600; margin: 0 0 4px 0; }
.wf-page-desc { font-size: 14px; color: var(--wf-text-muted); margin: 0 0 24px 0; }

.wf-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--wf-border); margin-bottom: 24px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; -ms-overflow-style: none; }
.wf-tabs::-webkit-scrollbar { display: none; }
.wf-tab { padding-bottom: 12px; font-size: 15px; font-weight: 500; color: var(--wf-text-muted); cursor: pointer; display: flex; align-items: center; gap: 8px; position: relative; transition: 0.2s;}
.wf-tab:hover { color: var(--wf-text-main); }
.wf-tab.active { color: var(--wf-text-main); font-weight: 600; }
.wf-tab.active::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--wf-primary); }
.wf-tab-count { background: #f1f5f9; color: #475569; padding: 2px 8px; border-radius: 12px; font-size: 12px; }
.wf-tab.active .wf-tab-count { background: var(--wf-primary-light); color: var(--wf-primary); }

.wf-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 768px) { .wf-card-grid { grid-template-columns: 1fr; } }
.wf-card { background: var(--wf-card); border: 1px solid var(--wf-border); border-radius: 8px; padding: 24px; position: relative; transition: 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.02); display: block; text-decoration: none; color: inherit; cursor: pointer; }
.wf-card:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); border-color: #cbd5e1; }

.wf-empty-state { grid-column: 1 / -1; text-align: center; padding: 60px 20px; background: #f8fafc; border: 2px dashed var(--wf-border); border-radius: 12px; display: none; }
.wf-empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.9; }
.wf-empty-title { font-size: 16px; font-weight: 600; color: #1e293b; margin: 0 0 8px 0; }
.wf-empty-desc { font-size: 14px; color: var(--wf-text-muted); margin: 0; }

.wf-btn { padding: 10px 16px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: 0.2s; text-align:center; display:inline-block; text-decoration:none; box-sizing:border-box;}
.wf-print-btn {background: #475569;color: #FFF;}
@media (max-width: 767px) {.wf-print-btn {position: absolute;right: 8%;top: 3%;}}
.wf-btn-primary { background: var(--wf-primary); color: white; }
.wf-btn-success { background: var(--wf-success); color: white; }
.wf-btn-danger { background: var(--wf-danger); color: white; }
#btn-new-workflow { background: var(--wf-primary); color: white; }

.wf-back-link { color: var(--wf-text-muted); text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 24px; }
.wf-back-link:hover { color: var(--wf-primary); text-decoration:underline; }
.wf-detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start;}
@media (max-width: 900px) { .wf-detail-grid { grid-template-columns: 1fr; } }
.wf-detail-panel { margin:auto 0;background: var(--wf-card); border: 1px solid var(--wf-border); border-radius: 8px; padding: 24px; margin-bottom: 24px; }

.wf-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; padding-bottom: 24px; border-bottom: 1px solid var(--wf-border); }
.wf-meta-item label { display: block; font-size: 12px; color: var(--wf-text-muted); margin-bottom: 4px; }
.wf-meta-item span { font-size: 14px; font-weight: 500; }

.wf-stage-item { display: flex; gap: 16px; margin-bottom: 24px; position: relative; }
.wf-stage-item:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 24px; bottom: -20px; width: 2px; background: var(--wf-border); }
.wf-stage-icon { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: white; z-index: 1; }
.wf-stage-icon.approved { background: var(--wf-success); }
.wf-stage-icon.rejected { background: var(--wf-danger); }
.wf-stage-icon.pending { background: #cbd5e1; }
.wf-stage-content { flex: 1; }
.wf-stage-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.wf-stage-title { font-size: 15px; font-weight: 600; }
.wf-stage-pill { font-size: 11px; padding: 2px 8px; border-radius: 12px; font-weight: 600; }
.wf-stage-pill.approved { background: var(--wf-success-bg); color: var(--wf-success); }
.wf-stage-pill.rejected { background: var(--wf-danger-bg); color: var(--wf-danger); }
.wf-stage-pill.pending { background: #f1f5f9; color: #64748b; }
.wf-stage-comment { background: #f8fafc; border: 1px solid var(--wf-border); padding: 12px; border-radius: 6px; font-size: 13px; margin-top: 8px; color: #334155; }

.wf-user-profile { display: flex; align-items: center; gap: 12px; }
.wf-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--wf-primary); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; }
.wf-timeline-small { border-left: 2px solid var(--wf-border); padding-left: 16px; margin-top: 16px; }
.wf-tl-item { position: relative; margin-bottom: 16px; font-size: 13px; }
.wf-tl-item::before { content: ""; position: absolute; left: -21px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--wf-border); }
.wf-tl-item.tl-green::before { background: var(--wf-success); }
.wf-tl-item.tl-red::before { background: var(--wf-danger); }

.wf-action-box { border: 1px solid var(--wf-border); border-radius: 8px; padding: 24px; margin-top: 24px; }
.wf-action-box textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--wf-border); border-radius: 6px; padding: 12px; margin: 12px 0; font-family: inherit; resize: vertical; }

.eip-dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 30px; }
.eip-stat-card { background: var(--wf-card); border: 1px solid var(--wf-border); border-radius: 12px; padding: 24px; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.02); }
.eip-stat-title { font-size: 14px; color: var(--wf-text-muted); font-weight: 500; margin-bottom: 12px; }
.eip-stat-value { font-size: 32px; font-weight: 700; margin-bottom: 8px; color: #0f172a; }
.eip-stat-trend { font-size: 13px; color: var(--wf-text-muted); }
.eip-stat-icon { position: absolute; right: 24px; top: 24px; width: 40px; height: 40px; border-radius: 50%; display:flex; align-items:center; justify-content:center; font-size: 18px; }

.eip-dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
@media (max-width: 900px) { .eip-dash-grid { grid-template-columns: 1fr; } }
.eip-panel { background: var(--wf-card); border: 1px solid var(--wf-border); border-radius: 12px; padding: 24px; }
.eip-panel-title { font-size: 18px; font-weight: 600; margin: 0 0 20px 0; color:#1e293b; }

.eip-quick-action { background: var(--wf-primary); color: white; border-radius: 12px; padding: 24px; margin-top: 24px; }
.eip-quick-action h3 { margin: 0 0 8px 0; font-size: 18px; color: white; }
.eip-quick-action p { margin: 0 0 20px 0; font-size: 14px; opacity: 0.9; }
.eip-quick-btn { display: block; width: 100%; padding: 12px; background: white; color: var(--wf-primary); text-align: center; border-radius: 6px; text-decoration: none; font-weight: 600; box-sizing:border-box;}

.eip-list-card { border: 1px solid var(--wf-border); border-radius: 8px; padding: 20px; margin-bottom: 16px; transition: 0.2s; display: block; text-decoration: none; color: inherit; }
.eip-list-card:hover { border-color: #cbd5e1; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
.eip-list-title { font-size: 16px; font-weight: 600; margin: 0 0 8px 0; color: #1e293b; line-height: 1.4;}
.eip-list-meta { font-size: 13px; color: var(--wf-text-muted); margin-bottom: 16px; }

.eip-activity-item { display:flex; gap: 16px; margin-bottom: 20px; text-decoration: none; color: inherit; transition: 0.2s; padding: 8px; border-radius: 8px; }
.eip-activity-item:hover { background: #f8fafc; }
.eip-activity-icon { width: 32px; height: 32px; background: var(--wf-primary-light); color: var(--wf-primary); border-radius: 50%; display:flex; align-items:center; justify-content:center; flex-shrink: 0; }
.eip-activity-text h4 { margin: 0 0 4px 0; font-size: 14px; font-weight: 600; color: #1e293b; }
.eip-activity-text p { margin: 0; font-size: 12px; color: var(--wf-text-muted); }

.wf-badge { padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 4px; }
.wf-badge.pending { background: #fffbeb; color: #d97706; border-color: #fde68a; }
.wf-badge.type-label { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; font-size: 11px; margin-left: 8px; }

.custom-form-group { margin-bottom: 20px; }
.custom-form-group label { display: block; font-weight: 600; margin-bottom: 8px; color: #1e293b; }
.custom-form-control { width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1!important; border-radius: 6px!important; box-sizing: border-box; font-family: inherit; }
.custom-form-control:focus { border: 1px solid #3a5da5!important;}

.wf-search-section { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; width: 100%; box-sizing: border-box; }
.wf-search-box { flex: 1; display: flex; align-items: center; background: #ffffff; border: 1px solid var(--wf-border); border-radius: 8px; padding: 0 16px; height: 48px; box-sizing: border-box; }
.wf-search-input { flex: 1; border: none !important; outline: none !important; box-shadow: none !important; padding: 0 0 0 12px !important; font-size: 15px; height: 100% !important; background:transparent;}

.wf-header-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 16px; }
.wf-create-panel { background: var(--wf-card); border: 1px solid var(--wf-border); border-radius: 8px; padding: 24px; margin-bottom: 24px; display: none; }
.wf-type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.wf-type-card { border: 1px solid var(--wf-border); border-radius: 8px; padding: 16px; text-decoration: none; color: inherit; display: block; transition: 0.2s; background: #fff; }
.wf-type-card:hover { border-color: var(--wf-primary); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); transform: translateY(-2px); }
.wf-type-name { font-size: 15px; font-weight: 600; margin: 0 0 4px 0; color: #0f172a; }
.wf-type-desc { font-size: 13px; color: var(--wf-text-muted); margin: 0 0 12px 0; line-height: 1.4; }
.wf-type-meta { font-size: 11px; color: #94a3b8; font-weight: 500; }

.eip-lightbox { position: fixed; z-index: 99999; top: 0; left: 0; width: 100%!important; max-width: 100%;height: 100%; background: rgba(15,23,42,0.85); display: none; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(4px); }
.eip-lightbox img { max-width: 90%; max-height: 90vh; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); object-fit: contain; }
.eip-lightbox-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; font-weight: 300; cursor: pointer; line-height: 1; }
.eip-lightbox-close:hover { color: #ef4444; }
.eip-img-trigger { border: 1px solid var(--wf-border); border-radius: 6px; cursor: pointer; transition: 0.2s; background: #fff; padding: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); display: block; margin-bottom: 12px;}
.eip-img-trigger:hover { border-color: var(--wf-primary); opacity: 0.8; }

.wf-action-box #submit-remark-btn {padding: 10px 16px;min-height: auto;border-radius: 6px;}

/* Repeater Table Styles */
.eip-repeater-table { width: 100%; border-collapse: collapse; margin-bottom: 15px; border: 1px solid var(--wf-border); }
.eip-repeater-table th { background: #f1f5f9; padding: 10px; font-size: 13px; text-align: left; border-bottom: 1px solid var(--wf-border); color: #475569; }
.eip-repeater-table td { padding: 10px; border-bottom: 1px solid var(--wf-border); vertical-align: top; }
.eip-repeater-table input, .eip-repeater-table textarea { width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px; font-family: inherit; }
.eip-repeater-table .remove-row-btn { background: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; padding: 6px 10px; border-radius: 4px; cursor: pointer; font-weight: bold; }
.eip-repeater-table .remove-row-btn:hover { background: #fecaca; }
.eip-repeater-add-btn { background: #f1f5f9; color: #1e293b; border: 1px dashed #cbd5e1; padding: 10px; border-radius: 4px; cursor: pointer; width: 100%; font-weight: 600; text-align: center; }
.eip-repeater-add-btn:hover { background: #e2e8f0; }

.eip-repeater-table {min-width: 100% !important;}

/* Notifications Styles */
.eip-top-actions { display: inline-flex; align-items: center; gap: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; position: relative; }
.eip-action-msg { position: relative; display: flex; align-items: center; justify-content: center; color: #64748b; text-decoration: none; padding: 4px; cursor: pointer; }
.eip-action-msg:hover { color: #3b82f6; }
.eip-msg-badge { position: absolute; top: -4px; right: -6px; background-color: #3b82f6; color: #fff; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; line-height: 1; }
.eip-actions-divider { width: 1px; height: 24px; background-color: #e2e8f0; }
.eip-action-pills { display: flex; align-items: center; gap: 12px; }
.eip-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.2s; border: 1px solid transparent; cursor: pointer; }
.eip-pill-warning { background-color: #fffbeb; color: #b45309; border-color: #fde68a; }
.eip-pill-warning:hover { background-color: #fef3c7; }
.eip-pill-danger { background-color: #fff1f2; color: #be123c; border-color: #fecdd3; }
.eip-pill-danger:hover { background-color: #ffe4e6; }
.eip-pill-success { background-color: #ecfdf5; color: #10b981; border-color: #a7f3d0; }
.eip-pill-success:hover { background-color: #d1fae5; }

/* Dropdown */
.eip-msg-dropdown { position: absolute; top: calc(100% + 10px); left: 0; width: 320px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); display: none; z-index: 1000; overflow: hidden; }
.eip-msg-dropdown.active { display: block; }
.eip-msg-header { padding: 12px 16px; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; background: #fafafa; }
.eip-msg-header h4 { margin: 0; font-size: 14px; color: #334155; font-weight: 600; }
.eip-msg-read-all { font-size: 12px; color: #2563eb; cursor: pointer; text-decoration: none; }
.eip-msg-list { max-height: 360px; overflow-y: auto; }
.eip-msg-item { display: block; padding: 16px; border-bottom: 1px solid #f1f5f9; text-decoration: none; color: inherit; transition: background 0.2s; position: relative; }
.eip-msg-item:hover { background: #f8fafc; }
.eip-msg-item.unread::before { content: ''; position: absolute; left: 6px; top: 22px; width: 6px; height: 6px; border-radius: 50%; background: #3b82f6; }
.eip-msg-item-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.eip-msg-author { font-size: 14px; font-weight: 600; color: #0f172a; margin-left: 8px; }
.eip-msg-time { font-size: 11px; color: #94a3b8; }
.eip-msg-comment { font-size: 13px; color: #475569; margin: 0 0 8px 8px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.eip-msg-meta { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.eip-msg-wf { background: #f1f5f9; color: #64748b; font-size: 11px; padding: 2px 6px; border-radius: 4px; font-family: monospace; }
.eip-msg-wf-subj { font-size: 11px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.eip-msg-attach { font-size: 11px; background: #f1f5f9; color: #475569; padding: 2px 6px; border-radius: 4px; display: inline-flex; align-items: center; gap: 4px; }
.eip-msg-footer { padding: 12px; text-align: center; border-top: 1px solid #f1f5f9; background: #fafafa; }
.eip-msg-footer a { font-size: 13px; color: #64748b; text-decoration: none; }
.eip-msg-empty { padding: 32px 16px; text-align: center; color: #94a3b8; font-size: 13px; }

/* Conversations Hub */
.ct-widget.widget_block p:empty { display: none !important; }

.eip-conversations-wrap { max-width: 1200px; margin: 0 auto; padding: 20px 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.eip-conversations-header { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; }
.eip-conversations-title { font-size: 20px; font-weight: 600; color: #0f172a; margin: 0; }
.eip-conv-list { display: flex; flex-direction: column; gap: 12px; }
.eip-conv-item { display: block; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; text-decoration: none; color: inherit; transition: all 0.2s; position: relative; }
.eip-conv-item:hover { border-color: #cbd5e1; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.eip-conv-item.unread { border-left: 4px solid #3b82f6; background: #f8fafc; }
.eip-conv-top { display: flex; justify-content: space-between; margin-bottom: 8px; align-items: baseline; }
.eip-conv-author { font-weight: 600; color: #0f172a; font-size: 15px; }
.eip-conv-time { color: #94a3b8; font-size: 13px; }
.eip-conv-body { color: #475569; font-size: 14px; line-height: 1.5; margin-bottom: 12px; }
.eip-conv-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.eip-conv-wf { background: #f1f5f9; color: #64748b; padding: 4px 8px; border-radius: 4px; font-family: monospace; }
.eip-conv-subj { color: #64748b; font-weight: 500; }
.eip-conv-attach { background: #e0f2fe; color: #0369a1; padding: 4px 8px; border-radius: 4px; display: inline-flex; align-items: center; gap: 4px; }
.eip-conv-pagination { margin-top: 30px; display: flex; justify-content: center; gap: 8px; }
.eip-conv-page { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; border: 1px solid #e2e8f0; border-radius: 6px; color: #475569; text-decoration: none; font-size: 14px; }
.eip-conv-page:hover { background: #f8fafc; color: #0f172a; }
.eip-conv-page.active { background: #3b82f6; color: #fff; border-color: #3b82f6; }
.eip-conv-empty { text-align: center; padding: 40px 20px; color: #94a3b8; background: #f8fafc; border-radius: 8px; border: 1px dashed #cbd5e1; }
.eip-conv-btn-readall { background: #f1f5f9; border: 1px solid #e2e8f0; color: #475569; padding: 6px 12px; border-radius: 6px; font-size: 13px; cursor: pointer; transition: all 0.2s; }
.eip-conv-btn-readall:hover { background: #e2e8f0; color: #0f172a; }

/* Resigned Modal */
#eip-resigned-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); z-index: 999999; display: flex; align-items: center; justify-content: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
#eip-resigned-modal { background: #fff; width: 450px; max-width: 90%; border-radius: 4px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); padding: 40px; box-sizing: border-box; }
#eip-resigned-modal .eip-alert-box { background: #f43f5e; color: #fff; padding: 16px; border-radius: 4px; font-size: 15px; line-height: 1.6; margin-bottom: 25px; }
#eip-resigned-modal .eip-btn { background: #fff; color: var(--wf-text-main); border: none; padding-top: 15px; width: 100%; border-radius: 4px; font-size: 16px; font-weight: 500; cursor: pointer; transition: all .12s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
#eip-resigned-modal .eip-btn:hover { background: #fff;color:#1e3a8a; }


.menu-attendance-report {
padding: calc(var(--menu-items-spacing, 10px) / 2) var(--menu-items-spacing, 10px);
margin-inline: var(--menu-items-spacing, 10px);
border-radius: 4px;
margin: 0 10px !important;
} 

@media (max-width: 689.98px) {
  /*
  .eip-action-pills {position: fixed;bottom: 2%;right: 5%;display: flex;flex-direction: column;}
  */
  .eip-actions-divider {display: none;}
  span.eip-approve-txt {display: none;}
  .ct-header .ct-container {max-width: 100%;width: 95%;}
  .eip-pill {display: inline-flex;border-radius: 10px;flex-direction: row;}
  .eip-msg-dropdown {left: unset;right: 0;}
  .eip-action-msg {order: 1;}
  .eip-top-actions {gap: 10px;}
}