/* Edmonton Ink Admin Styles */ .jvb-admin-wrap { margin: 20px 20px 0 0; } .jvb-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); grid-gap: 20px; margin-top: 20px; } .jvb-dashboard-card { background: white; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); padding: 20px; position: relative; } .jvb-dashboard-card h2 { margin-top: 0; padding-bottom: 10px; border-bottom: 1px solid #EFEFEF; font-size: 16px; color: #1B1B1B; } .jvb-status-list { margin: 0; padding: 0; list-style: none; } .jvb-status-list li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #EFEFEF; } .jvb-status-list li:last-child { border-bottom: none; } .status-label { font-weight: bold; } .jvb-user-stat { text-align: center; display: inline-block; margin-right: 30px; } .jvb-stat-number { display: block; font-size: 24px; font-weight: bold; color: #FF0080; } .jvb-stat-label { font-size: 14px; } .jvb-content-table { width: 100%; border-collapse: collapse; } .jvb-content-table th { text-align: left; padding: 8px; border-bottom: 1px solid #EFEFEF; } .jvb-content-table td { padding: 8px; border-bottom: 1px solid #EFEFEF; } .jvb-link-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10px; } .jvb-action, .jvb-quick-link { display: flex; align-items: center; justify-content: flex-start; gap: .75em; padding: 10px; background: #EFEFEF; border-radius: 4px; text-decoration: none; color: #1B1B1B; transition: all 0.2s ease; } .jvb-action:hover, .jvb-quick-link:hover { background: #FF0080; color: white; } .jvb-quick-link .dashicons { margin-right: 8px; } /* Settings tabs styling */ .jvb-settings-tabs { display: flex; border-bottom: 1px solid #EFEFEF; margin-bottom: 20px; } .jvb-settings-tab { padding: 10px 15px; cursor: pointer; border-bottom: 3px solid transparent; margin-right: 10px; } .jvb-settings-tab.active { border-bottom-color: #FF0080; font-weight: bold; } .jvb-settings-section { display: none; } .jvb-settings-section.active { display: block; } /* Form styling */ .jvb-form-table { width: 100%; border-collapse: collapse; } .jvb-form-table th { padding: 15px 10px 15px 0; text-align: left; width: 200px; vertical-align: top; } .jvb-form-table td { padding: 15px 0; } .jvb-form-table input[type="text"], .jvb-form-table input[type="number"], .jvb-form-table select, .jvb-form-table textarea { width: 100%; max-width: 400px; } .jvb-form-description { color: #666; font-size: 13px; margin-top: 4px; } .jvb-action-button { background: #FF0080; border: none; border-radius: 3px; color: white; padding: 8px 15px; cursor: pointer; text-decoration: none; display: inline-block; font-size: 13px; } .jvb-action-button:hover { background: #d6006c; } .loader { display: inline-flex; justify-content: center; align-items: center; width: 1.2em; height: 1.2em; margin-left: 1em; } .icon { display: flex; justify-content: center; align-items: center; } .loader .icon { display: none; width: 1.2em; height: 1.2em; } .icon svg { width: 100%; height: 100%; } .loader.loaded .icon.check, .loader.loading .icon.refresh { display: flex; } .loader.loading .icon.refresh svg { animation: spin 1s infinite; } @keyframes spin { to { transform: rotate(360deg); } }