/* * UFM Dashboard Styles 
 * Author: Anil Parkhe Creations
 */

.ufm-container { display: flex; flex-direction: column; min-height: 80vh; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #f5f6f8; color: #3c434a; border: 1px solid #c3c4c7; border-radius: 5px; overflow: hidden; margin-top: 20px; }

/* Header & Branding */
#ufm-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; background: #fff; }
.ufm-branding { display: flex; flex-direction: column; }
.ufm-credits { font-size: 14px; color: #8c8f94; font-weight: 600; letter-spacing: 0.5px; }
#ufm-user-profile { font-size: 14px; }

/* Horizontal Top Navigation */
#ufm-top-nav { background: #1d2327; padding: 0 30px; }
#ufm-top-nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 5px; overflow-x: auto; }
#ufm-top-nav ul li a { color: #c3c4c7; text-decoration: none; padding: 15px 20px; display: block; font-weight: 600; font-size: 14px; transition: 0.2s; white-space: nowrap; }
#ufm-top-nav ul li a:hover, #ufm-top-nav ul li a.active { color: #fff; background: #2c3338; box-shadow: inset 0 -3px 0 #2271b1; }

/* Main Content */
#ufm-content { flex-grow: 1; padding: 30px; background: #fff; position: relative; }
#ufm-view-title { margin: 0 0 20px 0; font-size: 24px; color: #1d2327; border-bottom: 1px solid #dcdde1; padding-bottom: 15px; }

/* Filter Bar */
.ufm-filter-bar { display: flex; gap: 10px; margin-bottom: 20px; background: #f6f7f7; padding: 15px; border-radius: 4px; border: 1px solid #c3c4c7; }
.ufm-filter-bar input[type="text"], .ufm-filter-bar select { padding: 8px; border: 1px solid #8c8f94; border-radius: 4px; flex-grow: 1; max-width: 300px; }

/* Tables and Forms */
.ufm-table { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 14px; }
.ufm-table th, .ufm-table td { padding: 12px 15px; border-bottom: 1px solid #f0f0f1; text-align: left; vertical-align: middle; }
.ufm-table th { background: #f6f7f7; font-weight: 600; }
.ufm-product-link { color: #2271b1; font-weight: 600; text-decoration: none; cursor: pointer; }
.ufm-product-link:hover { text-decoration: underline; }

.ufm-btn { padding: 8px 14px; background: #2271b1; color: #fff; border: none; border-radius: 3px; cursor: pointer; font-size: 14px; transition: 0.2s; }
.ufm-btn:hover { background: #135e96; }
.ufm-btn:disabled { background: #a7aaad; cursor: not-allowed; }
.ufm-btn-danger { background: #d63638; }
.ufm-btn-danger:hover { background: #b32d2e; }

.ufm-form-group { margin-bottom: 15px; }
.ufm-form-group label { display: block; margin-bottom: 5px; font-weight: 600; }
.ufm-form-group input, .ufm-form-group select { width: 100%; max-width: 400px; padding: 10px; border: 1px solid #8c8f94; border-radius: 4px; }
.ufm-loader { text-align: center; padding: 40px; color: #8c8f94; font-style: italic; }
.ufm-badge { padding: 3px 8px; border-radius: 12px; font-size: 12px; font-weight: 600; background: #e5e5e5; color: #333; }
.ufm-badge.inactive { background: #d63638; color: #fff; }

/* Pagination Controls */
.ufm-pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 15px; border-top: 1px solid #dcdde1; }
.ufm-page-info { font-weight: 600; color: #3c434a; }

/* Modal Styles */
.ufm-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: none; z-index: 99999; justify-content: center; align-items: center; }
.ufm-modal { background: #fff; width: 600px; max-width: 90%; border-radius: 5px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); overflow: hidden; display: flex; flex-direction: column; max-height: 90vh; }
.ufm-modal-header { padding: 20px; border-bottom: 1px solid #dcdde1; display: flex; justify-content: space-between; align-items: center; background: #f6f7f7; }
.ufm-modal-header h3 { margin: 0; }
.ufm-modal-close { cursor: pointer; font-size: 24px; font-weight: bold; line-height: 1; }
.ufm-modal-body { padding: 20px; overflow-y: auto; }
.ufm-modal-footer { padding: 20px; border-top: 1px solid #dcdde1; text-align: right; background: #f6f7f7; }

/* Toggle Switch */
.ufm-switch { position: relative; display: inline-block; width: 50px; height: 24px; margin-right: 15px; vertical-align: middle; }
.ufm-switch input { opacity: 0; width: 0; height: 0; }
.ufm-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 24px; }
.ufm-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
.ufm-switch input:checked + .ufm-slider { background-color: #2271b1; }
.ufm-switch input:checked + .ufm-slider:before { transform: translateX(26px); }

/* Variants Table */
.ufm-variants-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.ufm-variants-table th, .ufm-variants-table td { padding: 8px; border: 1px solid #dcdde1; font-size: 13px; }
.ufm-variants-table input { width: 80px; padding: 4px; }