/**
 * Admin CSS for the Approval Workflow plugin.
 * This is a complete and consolidated stylesheet.
 */

/*================================================================
  1. BUILDER STYLES (Form & Workflow)
================================================================*/
.aaw-builder-container { display: flex; gap: 20px; }
.aaw-toolbox { width: 200px; border: 1px solid #ddd; padding: 10px; background: #fff; border-radius: 4px; }
.aaw-canvas { flex-grow: 1; border: 1px dashed #ccd0d4; padding: 10px; min-height: 400px; background-color: #f6f7f7; border-radius: 4px; }
.aaw-field-template, .aaw-node-template { background: #e9e9e9; border: 1px solid #ccc; padding: 8px 12px; margin-bottom: 8px; cursor: grab; border-radius: 3px; text-align: center; }
.aaw-field-instance { background: #fff; border: 1px solid #ccd0d4; padding: 12px; margin-bottom: 10px; border-radius: 3px; cursor: move; }
.aaw-field-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.aaw-field-type { font-weight: bold; text-transform: capitalize; }
.aaw-field-actions a { text-decoration: none; color: #d63638; }
.aaw-field-settings label { display: inline-block; width: 80px; }
.aaw-field-settings input[type="text"] { width: calc(100% - 100px); }

/* --- Drawflow Editor Styles --- */
#drawflow-container { position: relative; width: 100%; height: 600px; }
#drawflow { width: 100%; height: 100%; background: #f0f0f1; background-image: linear-gradient(#ccc 1px, transparent 1px), linear-gradient(90deg, #ccc 1px, transparent 1px); background-size: 20px 20px; border: 1px solid #ccc; }
.drawflow-node { border-radius: 4px !important; box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important; border: 1px solid #bbb !important; }
.drawflow-node .title-box { background: #f0f0f1 !important; color: #333 !important; border-bottom: 1px solid #ddd !important; padding: 8px !important; cursor: move; }
.drawflow-node .box { padding: 10px !important; }
.drawflow-node.selected { border-color: #2271b1 !important; }
.drawflow-node label { display: block; margin-bottom: 5px; font-weight: bold; }
.drawflow-node input, .drawflow-node select, .drawflow-node textarea { width: 100%; padding: 5px; box-sizing: border-box; }
.drawflow-node.approval { background: #e9f5ff !important; border-color: #99caff !important; }
.drawflow-node.approval .title-box { background: #d4e9ff !important; }
.drawflow-node.condition { background: #e9f9ee !important; border-color: #a3e9b8 !important; }
.drawflow-node.condition .title-box { background: #d4f4e0 !important; }
.drawflow-node.start { background: #e9f9ee !important; border-color: #4ab866 !important; }
.drawflow-node.start .title-box { background: #d4f4e0 !important; }
.drawflow-node.end { background: #f9e9e9 !important; border-color: #e9a3a3 !important; }
.drawflow-node.end .title-box { background: #f4d4d4 !important; }
.aaw-condition-builder p { margin: 0 0 10px; }
.aaw-condition-builder p:last-child { margin-bottom: 0; }
.aaw-condition-builder select, .aaw-condition-builder input { width: 100%; }

/*================================================================
  2. REQUEST DETAILS & HISTORY STYLES
================================================================*/
#aaw_request_details_metabox .form-table th { width: 200px; padding-left: 0; }
#aaw_request_details_metabox .form-table p { margin: 0; font-size: 14px; background: #fdfdfd; padding: 8px 12px; border: 1px solid #e0e0e0; border-radius: 3px; }
.aaw-uploaded-file-link { display: inline-block; padding: 8px 12px; background: #f0f0f1; border: 1px solid #dcdcde; border-radius: 3px; text-decoration: none; color: #2271b1; font-weight: 600; }
.aaw-uploaded-file-link:before { content: '📄'; margin-right: 8px; }
.aaw-uploaded-file-link:hover { border-color: #b3b3b3; }
.aaw-history-log ul { list-style: none; margin: 0; padding: 0; border-left: 3px solid #007cba; }
.aaw-history-entry { padding: 5px 0 15px 15px; position: relative; }
.aaw-history-entry::before { content: ''; position: absolute; left: -9px; top: 10px; width: 12px; height: 12px; border-radius: 50%; background-color: #007cba; border: 2px solid #fff; }
.aaw-history-action { font-weight: bold; font-size: 14px; }
.aaw-history-comment { font-size: 13px; color: #50575e; padding: 5px 0; }
.aaw-history-actor { font-style: italic; color: #555; }
.aaw-history-time { font-size: 12px; color: #777; }

/*================================================================
  3. MODAL DIALOG STYLES
================================================================*/
#aaw-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 99998; display: flex; align-items: center; justify-content: center; }
#aaw-modal-box { background: #fff; padding: 25px 30px; border-radius: 5px; width: 90%; max-width: 450px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }
#aaw-modal-box h2 { margin-top: 0; margin-bottom: 15px; font-size: 20px; text-align: left; }
#aaw-modal-box .aaw-modal-content { text-align: left; }
#aaw-modal-box .aaw-modal-content p { font-size: 14px; color: #444; margin: 0 0 10px; }
#aaw-modal-box .aaw-modal-content p:last-child { margin-bottom: 0; }
.aaw-modal-buttons { display: flex; justify-content: flex-end; gap: 15px; margin-top: 25px; }

/*================================================================
  4. LIST TABLE STATUS LABELS
================================================================*/
.aaw-status-label { display: inline-block; padding: 2px 8px; border-radius: 4px; color: #fff; font-weight: bold; font-size: 12px; text-transform: capitalize; }
.aaw-status-pending { background-color: #f0b849; }
.aaw-status-approved { background-color: #2271b1; }
.aaw-status-rejected { background-color: #d63638; }